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

Question

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

Answer 1

我完全不知道这是一种好的、坏的还是丑陋的做事方式，但是我整理了一个简单的小提琴来实现你所追求的目标 - 我所做的基本原则是这样的：

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

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

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

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

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

mouseup然后我使用 jQuery将回调绑定到文档事件on- 回调的目的是首先检测目标是否是画布元素，如果是，我们获取织物画布的 id，将其与我们存储的 id 进行比较更早的事件mouse:down，如果它们不同，则将我们之前存储的 activeObject 添加到新的画布目标，就像canvases[canvasId].add(activeObject);在 mouseup 回调结束时一样，我清除 activeObject 和 initialCanvas 变量 - 这可以防止用户简单地单击画布对象，然后单击新画布并模拟无缝拖放。

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

我希望它有所帮助，但我确信它需要改进和改进，特别是让对象从 canvas1 快速回到原来的起始位置或完全消失，而不是仅仅被卡在画布的视口之外。