canvas - online - Arrastre el objeto Fabric.js de un lienzo a otro

fabric js tutorial

Question

Estoy usando Fabric.js para crear diseños en cualquier producto. mi producto tiene dos lienzos, por lo que quiero mover la tela. fabric.Text de un lienzo a otro y quiero arrastrar y soltar el objeto del lienzo de tela a otros lienzos de tela.

Answer 1

No tengo ni idea de si esta es una forma buena, mala o fea de hacer las cosas, sin embargo, he creado un simple violín que logra lo que busca: el principio básico de lo que he hecho es esto:

encapsular sus objetos de lienzo dentro de un objeto, donde los identificadores de lienzo son las claves de objeto, por ejemplo

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

esto le permite hacer referencia a ellos fácilmente más adelante.

Luego, en el mouse:down lienzo mouse:down evento mouse:down , si hay un objeto activo capture una referencia junto con el id del lienzo (utilizando activeObject = this.getActiveObject(); y this.lowerCanvasEl.id respectivamente dentro del mouse:down devolución de llamada mouse:down .

nota: puede usar el object:selected evento object:selected en lugar del mouse:down ; sin embargo, si arrastra un objeto ya seleccionado en el lienzo, no se dispara.

Luego mouseup una devolución de llamada al evento de mouseup documento usando jQuery on - el propósito de la devolución de llamada es primero detectar si el objetivo es un elemento canvas, si es que obtenemos el id de su canvas de tela, compararlo con el id que almacenado en el mouse:down evento mouse:down anterior, y si son diferentes, agregue el activeObject que almacenamos anteriormente al nuevo canvas canvas como canvases[canvasId].add(activeObject); al final de la devolución de llamada del mouse, borro las variables activeObject y initialCanvas: esto evita que el usuario simplemente haga clic en un objeto canvas y luego haga clic en el nuevo lienzo y simule un arrastrar y soltar sin problemas.

el código completo está aquí: http://jsfiddle.net/uppzL/12/

Espero que sea útil, estoy seguro de que necesita mejorar y mejorar, especialmente para que el objeto de lienzo 1 vuelva a su lugar de origen original o desaparezca por completo, en lugar de quedar atrapado en la ventana gráfica del lienzo.