在对象以编程方式移动后,Fabricjs在其新位置上无法选择

时间:2013-11-23 12:06:16

标签: javascript fabricjs

我试图以编程方式移动对象并获得成功,但是在通过编程方式移动对象后,它无法通过选择对象当前位置来选择对象,仍然可以通过其旧位置选择对象试过canvas.calcOffset();仍然没有用。

如何使对象在当前位置可选择我使用的代码如下

的Javascript

 var canvas=new fabric.Canvas('canvas');
 canvas.add(new fabric.Rect({                    
                    left:100,
                    top: 100,
                    width: 75,
                    height: 50,
                    fill: 'white',
                    stroke: 'black',
                    strokeWidth: 3,
                    padding: 10,
                    selectable: true
             }));


function changePosition()
{
    canvas.item(0).set({left:300});
    canvas.renderAll();
    canvas.calcOffset();
}

HTML

<div>
<canvas id="canvas" width="400" height="400" style="border:1px solid red"/>
</div>
<input type="button" onclick="changePosition()" value="Change Possition"/>

Jsfiddle

重现错误的步骤

  1. 点击更改位置按钮
  2. 尝试在当前位置选择矩形,然后移动光标到之前对象所在的plave,您将可以选择对象

1 个答案:

答案 0 :(得分:36)

如果要以编程方式更改对象的位置,则需要触发setCoords()方法一次。这会将您对象的Coords设置为新位置。