Warning: file_get_contents(/data/phpspider/zhask/data//catemap/8/svg/2.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript Can';t将FabricJS svg或组对象移动到画布左上角_Javascript_Svg_Fabricjs - Fatal编程技术网

Javascript Can';t将FabricJS svg或组对象移动到画布左上角

Javascript Can';t将FabricJS svg或组对象移动到画布左上角,javascript,svg,fabricjs,Javascript,Svg,Fabricjs,我正在开发一个FabricJS应用程序,我希望用户通过简单的点击将对象移动到画布原点,即使在旋转或缩放对象或一组对象之后也是如此。 为此,单击时,我会在用户单击时执行以下代码: obj.left= obj.getBoundingRect().width/2; obj.top=obj.getBoundingRect().height/2; 它可以完美地处理矩形或文本,但在使用shape、svg甚至一组对象时根本不起作用。我不知道为什么 下面是完整的代码 重要提示:请在浏览器中启用跨源访问以加载s

我正在开发一个FabricJS应用程序,我希望用户通过简单的点击将对象移动到画布原点,即使在旋转或缩放对象或一组对象之后也是如此。 为此,单击时,我会在用户单击时执行以下代码:

obj.left= obj.getBoundingRect().width/2;
obj.top=obj.getBoundingRect().height/2;
它可以完美地处理矩形或文本,但在使用shape、svg甚至一组对象时根本不起作用。我不知道为什么

下面是完整的代码

重要提示:请在浏览器中启用跨源访问以加载svg。

this.\uu canvas=new fabric.canvas('meCanvas'{
对,对,
身高:400,
宽度:400,
背景颜色:“#1F”,
拉票人:'azpoazpoaz'
});
设rect=new fabric.rect({
填充:“红色”,
宽度:200,
身高:100,
左:100,,
前100名,
原文:“中心”,
原文:'中心',
fontWeight:“正常”
});
让text=new fabric.IText('text'{
fontFamily:《泰晤士报》,
尺码:18,
填充:“白色”,
左:100,,
前100名,
原文:“中心”,
原文:'中心',
fontWeight:“正常”
});
让url为空https://svgshare.com/i/9DX.svg';
fabric.loadSVGFromURL(url,(对象,选项)=>{
让loadedObjects=fabric.util.GroupsGelements(对象、选项);
加载对象。左=50;
加载对象。top=150;
此._canvas.add(加载对象);
});
让url2为您服务https://svgshare.com/i/9Cp.svg';
fabric.loadSVGFromURL(url2,(对象,选项)=>{
让loadedObjects=fabric.util.GroupsGelements(对象、选项);
加载对象。左=100;
加载对象。top=200;
加载对象。角度=20;
此._canvas.add(加载对象);
});
此.uu canvas.add(rect);
此._ucanvas.add(文本);
这个;
$('#pushorigin')。单击((e)=>{
设obj=this.\uu canvas.getActiveObject();
obj.left=obj.getBoundingRect().width/2;
obj.top=obj.getBoundingRect().height/2;
这是.u canvas.requestRenderal();
});

推回原点

为所有对象设置
originX:'center',originY:'center'
,然后您的解决方案将工作

this.\uu canvas=new fabric.canvas('meCanvas'{
对,对,
身高:400,
宽度:400,
背景颜色:“#1F”,
拉票人:“azpoazpoaz”
});
设rect=new fabric.rect({
填充:“红色”,
宽度:200,
身高:100,
左:100,,
前100名,
原文:“中心”,
原文:'中心',
fontWeight:“正常”
});
让text=new fabric.IText('text'{
fontFamily:《泰晤士报》,
尺码:18,
填充:“白色”,
左:100,,
前100名,
原文:“中心”,
原文:'中心',
fontWeight:“正常”
});
让url为空https://svgshare.com/i/9DX.svg';
fabric.loadSVGFromURL(url,(对象,选项)=>{
让loadedObjects=fabric.util.GroupsGelements(对象、选项);
loadedObjects.set({
左:50,,
排名:150,
原文:“中心”,
原创:“中心”
})
此._canvas.add(加载对象);
});
让url2为您服务https://svgshare.com/i/9Cp.svg';
fabric.loadSVGFromURL(url2,(对象,选项)=>{
让loadedObjects=fabric.util.GroupsGelements(对象、选项);
loadedObjects.set({
左:100,,
前200名,
角度:20,
原文:“中心”,
原创:“中心”
})
此._canvas.add(加载对象);
});
此.uu canvas.add(rect);
此._ucanvas.add(文本);
这个;
$('#pushorigin')。单击((e)=>{
设obj=this.\uu canvas.getActiveObject();
对象集({
左:obj.getBoundingRect().width/2,
顶部:obj.getBoundingRect().height/2
}).setCoords()
这是.u canvas.requestRenderal();
});

推回原点