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

Posted 2023-03-25

【中文标题】对象以编程方式移动后的Fabricjs在其新位置上不可选择

【英文标题】：Fabricjs after object move programmatically its not selectable on its new position

【发布时间】：2013-12-08 08:23:36

【问题描述】：

我试图以编程方式移动对象并获得成功，但是通过编程方式移动对象后，它无法通过选择对象当前位置来选择对象，仍然可以通过其旧位置选择对象 I已尝试使用 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"   style="border:1px solid red"/>
</div>
<input type="button" onclick="changePosition()" value="Change Possition"/>

Jsfiddle

重现错误的步骤

单击更改位置按钮 尝试在当前位置选择矩形，然后将光标移动到对象之前所在的位置，您将能够选择对象

【问题讨论】：

canvas.item(0).setCoords()

@kangax 非常感谢。它似乎是错误，因为如果它移动它应该更新它的坐标是它。

@kangax 我正在尝试构建协作白板，我想画线，例如：当老师画线时，所有学生的白板都应该更新绘图我该怎么做？跨度>

好吧，你得把你的任务分解成小任务，然后在这里或 Fabric 的谷歌小组中询问任何尚不清楚的地方

【参考方案1】：

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

【讨论】：

感谢@innodel，kangax 很早就回答了这个问题，请查看我的问题下方的评论。

我刚刚意识到，即使您以编程方式更改选择填充，您也需要调用 setCoords() 来调整角点单击区域。谢谢！