Fabricjs - 以编程方式选择对象以立即移动/拖动

Posted

技术标签:

【中文标题】Fabricjs - 以编程方式选择对象以立即移动/拖动【英文标题】:Fabricjs - select object programatically for immediate movement/drag 【发布时间】:2014-07-27 11:13:57 【问题描述】:

我可以使用fabricjs 以编程方式选择对象。但是,它的行为与使用鼠标单击选择对象时不同。单击鼠标时,对象会成为焦点,例如,可以拖动它。但是,在程序选择中,我无法立即移动对象。一个例子jsfiddle:

http://jsfiddle.net/ThzXM/1/

程序化选择:

canvas.setActiveObject(canvas.item(0));

我最终想要实现的是:点击按钮时,画布上会添加一个新矩形,用户可以在将其放置在画布上之前四处移动 - 无需额外点击。是否有可能以跨浏览器兼容的方式做到这一点? (我知道在某些浏览器中我可以触发 mouseclick 事件,但大多数不允许它。)

【问题讨论】:

你发现了吗?我有同样的问题,新添加的项目即使它们看起来很活跃也无法交互,直到它们被取消选择并重新选择 【参考方案1】:

你必须这样做。不要忘记调用 setCoords() 来更新对象的边界框。

// Set the active element
canvas.setActiveObject(canvas.item(0));
// Set left, o right,or angle... check documentation.
//Don´t forget to call setCoords() after changes.
canvas.item(0).setLeft(80).setCoords(); 
//Then render the canvas
canvas.renderAll()

【讨论】:

以上是关于Fabricjs - 以编程方式选择对象以立即移动/拖动的主要内容,如果未能解决你的问题,请参考以下文章

使用 FabricJS 裁剪图像

如何以编程方式在 Fabric.js 呈现的一组图像中选择一个图像

如何以编程方式在移动设备上调用本机日期选择器

以编程方式选择 Internet 连接(WiFi、移动宽带……)

是否可以使用fabricjs以英寸为单位获取文本或图像对象的大小?

如何以编程方式从控件自己的更改事件中更改选择框选择并使其在移动浏览器中工作