将Fabric.js对象从一个画布拖到另一个画布

Question

我正在使用Fabric.js在任何产品上创建设计。我的一些产品有两个画布，所以我想将fabric.Text从一个画布移动到另一个画布，我想将Fabric画布对象拖放到其他Fabric画布上。

Answer 1

我完全不知道这是一种好的，坏的或丑陋的做事方式，但是我把一个简单的小提琴放在一起，实现了你的目标 - 我所做的基本原则是：< / p>

将画布对象封装在一个对象中，其中画布id是对象键，例如

var canvases = {
    canvas1 : new fabric.Canvas('canvas1'),
    canvas2 : new fabric.Canvas('canvas2')
 }

这使您可以在以后轻松地引用它们。

然后在画布mouse:down事件中，如果有活动对象捕获对它的引用以及画布的id（分别使用activeObject = this.getActiveObject();和this.lowerCanvasEl.id mouse:down 1}}回调。

注意：您可以使用object:selected事件代替mouse:down，但是如果您在画布上拖动已选择的对象，则不会触发。

然后我使用jQuery mouseup将回调绑定到文档on - 回调的目的是首先检测目标是否是canvas元素，如果是，我们得到id你的结构画布，将它与我们之前存储在mouse:down事件中的id进行比较，如果它们不同，则将我们之前存储的activeObject添加到新的画布目标，如下所示canvases[canvasId].add(activeObject);。 mouseup回调我清除了activeObject和initialCanvas变量 - 这可以防止用户单击一个画布对象，然后单击新画布并模拟无缝拖放。

完整代码在这里：http://jsfiddle.net/uppzL/12/

我希望它有用，我确定它需要改进和改进，特别是让canvas1中的对象快速恢复到它的原始起始位置或完全消失，而不是仅仅被卡在画布的视口之外