将Fabric.js对象从一个画布拖到另一个画布 [英] Drag Fabric.js object from one canvas to another

问题描述

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

解决方案

我完全不知道这是一个好，坏或丑的做事方式，但我把一个简单的小提琴实现你所做的 - 我所做的基本原理是：

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

  var canvases = {
 canvas1：new fabric.Canvas（'canvas1'），
 canvas2：new fabric.Canvas（'canvas2'）
} 
  

然后在画布 mouse：down 事件中，如果有活动对象捕获引用它和canvas的id（使用 activeObject = this.getActiveObject（）; 和 this.lowerCanvasEl.id > 对象：选择事件代替 mouse：down ，但是如果在画布上拖动已选择的对象，则不会触发。 / p>

然后我使用jQuery 在 mouseup $ c> - 回调的目的是首先检测目标是否是一个canvas元素，如果它是我们获取的织物画布的id，将它与我们存储在鼠标的id进行比较：down 事件，如果他们不同添加我们之前存储的activeObject到新的画布目标，如 canvases [canvasId] .add（activeObject）; 在mouseup回调结束时我清除activeObject和initialCanvas变量 - 这防止用户简单地点击一个画布对象，然后点击新的画布，并模拟一个无缝的拖放。

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

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

I am using Fabric.js to create design on any product. my some product has two canvas so I want to move fabric.Text from one canvas to another and I want to drag and drop Fabric canvas object to other Fabric canvases.

解决方案

I have absolutely no idea whether this is a good, bad or ugly way of doing things however I've put together a simple fiddle which achieves what you are after - the basic principle of what i've done is this:

encapsulate your canvas objects within an object, where the canvas id's are the object keys, for example

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

this allows you to reference them easily later on.

Then on the canvas mouse:down event, if there is an active object capture a reference to it along with the id of the canvas (using activeObject = this.getActiveObject(); and this.lowerCanvasEl.id respectively within the mouse:down callback.

note: you could use the object:selected event in place of mouse:down, however if you drag an already selected object on the canvas, it doesn't fire.

Then I bound a callback to the document mouseup event using jQuery on - the purpose of the callback is to first detect whether the target is a canvas element, if it is we get the id of your fabric canvas, compare it to the id that we stored on the mouse:down event earlier, and if they are different add the activeObject that we stored earlier to the new canvas target like so canvases[canvasId].add(activeObject); at the end of the mouseup callback I clear the activeObject and initialCanvas variables - this prevents the user from simply clicking a canvas object and then clicking on the new canvas and simulates a seamless drag-and-drop.

full code is here: http://jsfiddle.net/uppzL/12/

I hope that it's helpful, i'm sure it needs refining and improving though, especially getting the object from canvas1 to snap back to it's original starting place or disappear completely, rather than just being stuck out of the viewport of the canvas.

这篇关于将Fabric.js对象从一个画布拖到另一个画布的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！