无法将 FabricJS svg 或组对象移动到画布左上角

Posted

技术标签:

【中文标题】无法将 FabricJS svg 或组对象移动到画布左上角【英文标题】:Can't move FabricJS svg or group objects to the canvas top left corner 【发布时间】:2019-04-08 10:10:03 【问题描述】:

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

obj.left= obj.getBoundingRect().width/2;
obj.top=obj.getBoundingRect().height/2;

它与矩形或文本完美配合,但在使用形状、svg 甚至对象组时根本不起作用。我不知道为什么!

下面是完整的代码。

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

    this.__canvas = new fabric.Canvas('meCanvas', 
        preserveObjectStacking: true,
        height: 400,
        width: 400,
        backgroundColor: '#1F1F1F',
        canvasKey:'azpoazpoaz'
    );
   let rect = new fabric.Rect(
        fill: 'red',
        width: 200,
        height: 100,
        left: 100,
        top: 100,
        originX: 'center',
        originY: 'center',
        fontWeight: 'normal'
    );

    let text = new fabric.IText('Text', 
        fontFamily: 'Times',
        fontSize: 18,
        fill: 'white',
        left: 100,
        top: 100,
        originX: 'center',
        originY: 'center',
        fontWeight: 'normal'
    );

    let url = 'https://svgshare.com/i/9DX.svg';
    fabric.loadSVGFromURL(url,(objects,options)=> 

        let loadedObjects = fabric.util.groupSVGElements(objects, options);
        loadedObjects.left=50;
        loadedObjects.top=150;
        this.__canvas.add(loadedObjects);
    );

    let url2 = 'https://svgshare.com/i/9Cp.svg';
    fabric.loadSVGFromURL(url2,(objects,options)=> 

        let loadedObjects = fabric.util.groupSVGElements(objects, options);
        loadedObjects.left=100;
        loadedObjects.top=200;
        loadedObjects.angle=20;
        this.__canvas.add(loadedObjects);
    );

    this.__canvas.add(rect);
    this.__canvas.add(text);
    this.__canvas.renderAll();

    $('#pushorigin').click((e)=>
        let obj = this.__canvas.getActiveObject();
        obj.left= obj.getBoundingRect().width/2;
        obj.top=obj.getBoundingRect().height/2;
        this.__canvas.requestRenderAll();
    );
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.3/fabric.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    <div style='display: inline-block'>
        <div>
            <canvas id='meCanvas' ref='meFabric'/>
        </div>
        <div>
            <button id='pushorigin'>Push to origin</button>
        </div>
    </div>

如果您选择文本或矩形并单击“推到原点”按钮,它们将转到原点(左上角)。但是同样的动作不适用于 svg(三角形和多边形),如果我们拉伸这些 svg 甚至旋转它们,情况会更糟,它们不会回到原点。使用一组对象时也是如此!

我不知道该怎么办,我迷路了。我用谷歌搜索了几天,一无所获。

请帮忙!

【问题讨论】:

【参考方案1】:

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

this.__canvas = new fabric.Canvas('meCanvas', 
  preserveObjectStacking: true,
  height: 400,
  width: 400,
  backgroundColor: '#1F1F1F',
  canvasKey: 'azpoazpoaz'
);
let rect = new fabric.Rect(
  fill: 'red',
  width: 200,
  height: 100,
  left: 100,
  top: 100,
  originX: 'center',
  originY: 'center',
  fontWeight: 'normal'
);

let text = new fabric.IText('Text', 
  fontFamily: 'Times',
  fontSize: 18,
  fill: 'white',
  left: 100,
  top: 100,
  originX: 'center',
  originY: 'center',
  fontWeight: 'normal'
);

let url = 'https://svgshare.com/i/9DX.svg';
fabric.loadSVGFromURL(url, (objects, options) => 

  let loadedObjects = fabric.util.groupSVGElements(objects, options);
  loadedObjects.set(
    left: 50,
    top: 150,
    originX: 'center',
    originY: 'center'
  )

  this.__canvas.add(loadedObjects);
);

let url2 = 'https://svgshare.com/i/9Cp.svg';
fabric.loadSVGFromURL(url2, (objects, options) => 
  let loadedObjects = fabric.util.groupSVGElements(objects, options);
  loadedObjects.set(
    left: 100,
    top: 200,
    angle: 20,
    originX: 'center',
    originY: 'center'
  )
  this.__canvas.add(loadedObjects);
);

this.__canvas.add(rect);
this.__canvas.add(text);
this.__canvas.renderAll();

$('#pushorigin').click((e) => 
  let obj = this.__canvas.getActiveObject();
  obj.set(
    left: obj.getBoundingRect().width / 2,
    top: obj.getBoundingRect().height / 2
  ).setCoords()
  this.__canvas.requestRenderAll();
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.3/fabric.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<div style='display: inline-block'>
    <div>
        <canvas id='meCanvas' ref='meFabric'/>
    </div>
    <div>
        <button id='pushorigin'>Push to origin</button>
    </div>
</div>

【讨论】:

以上是关于无法将 FabricJS svg 或组对象移动到画布左上角的主要内容,如果未能解决你的问题,请参考以下文章

对象以编程方式移动后的Fabricjs在其新位置上不可选择

在 FabricJS 中转换视口时边界对象错误,单击对象时用户无法选择对象

如何使用threejs将fabricjs加载为obj的纹理

FabricJS - Javascript - PHP:导出 SVG 保存在服务器上

Fabricjs:在画布上更新 SVG

fabricjs画布内的svg颜色没有改变