Fabric JS: copia/incolla l'oggetto sul mouse verso il basso

Question

Sto provando a creare un gioco a blocchi in cui si selezionano le forme da un menu e le si posiziona sulla tela. C'è un menu forma in cui è possibile trascinare le forme sulla tela. Mi piacerebbe che lasci la forma principale nel menu mentre trascina un clone sulla tela. È possibile? Ho creato un jsfiddle per aiutare.

JSFIDDLE

window.canvas = new fabric.Canvas('fabriccanvas'); 
var edgedetection = 10; //pixels to snap 
canvas.selection = false; 

window.addEventListener('resize', resizeCanvas, false); 

function resizeCanvas() { 
canvas.setHeight(window.innerHeight); 
canvas.setWidth(window.innerWidth); 
canvas.renderAll(); 
} 

// resize on init 
resizeCanvas(); 

//Initialize Everything 
init(); 

function init(top, left, width, height, fill) { 

    var bg = new fabric.Rect({ 
    left: 0, 
    top: 0, 
    fill: "#eee", 
    width: window.innerWidth, 
    height: 75,  
    lockRotation: true, 
    maxHeight: document.getElementById("fabriccanvas").height, 
    maxWidth: document.getElementById("fabriccanvas").width, 
    selectable: false, 
    }); 

    var squareBtn = new fabric.Rect({ 
    top: 6, 
    left: 18, 
    width: 40, 
    height: 40, 
    fill: '#af3', 
    lockRotation: true, 
    originX: 'left', 
    originY: 'top', 
    cornerSize: 15, 
    hasRotatingPoint: false, 
    perPixelTargetFind: true, 
    }); 

    var circleBtn = new fabric.Circle({ 
    radius: 20, 
    fill: '#f55', 
    top: 6, 
    left: 105, 
    }); 

    var triangleBtn = new fabric.Triangle({ 
    width: 40, 
    height: 35, 
    fill: 'blue', 
    top: 10, 
    left: 190, 
    }); 

    var sqrText = new fabric.IText("Add Square", { 
    fontFamily: 'Indie Flower', 
    fontSize: 14, 
    fontWeight: 'bold', 
    left: 6, 
    top: 50, 
    selectable: false, 
    }); 

    var cirText = new fabric.IText("Add Circle", { 
    fontFamily: 'Indie Flower', 
    fontSize: 14, 
    fontWeight: 'bold', 
    left: 95, 
    top: 50, 
    selectable: false, 
    }); 

    var triText = new fabric.IText("Add Triangle", { 
    fontFamily: 'Indie Flower', 
    fontSize: 14, 
    fontWeight: 'bold', 
    left: 175, 
    top: 50, 
    selectable: false, 
    }); 

    var shadow = { 
    color: 'rgba(0,0,0,0.6)', 
    blur: 3,  
    offsetX: 0, 
    offsetY: 2, 
    opacity: 0.6, 
    fillShadow: true, 
    strokeShadow: true 
    } 

    window.canvas.add(bg); 
    bg.setShadow(shadow); 
    window.canvas.add(sqrText); 
    window.canvas.add(cirText); 
    window.canvas.add(triText); 
    window.canvas.add(squareBtn); 
    window.canvas.add(circleBtn); 
    window.canvas.add(triangleBtn); 

    canvas.forEachObject(function (e) { 
    e.hasControls = e.hasBorders = false; //remove borders/controls 
}); 

this.canvas.on('object:moving', function (e) { 
    var obj = e.target; 
    obj.setCoords(); //Sets corner position coordinates based on current angle, width and height 
    canvas.forEachObject(function (targ) { 
     activeObject = canvas.getActiveObject(); 


     if (targ === activeObject) return; 


     if (Math.abs(activeObject.oCoords.tr.x - targ.oCoords.tl.x) < edgedetection) { 
      activeObject.left = targ.left - activeObject.currentWidth; 

     } 
     if (Math.abs(activeObject.oCoords.tl.x - targ.oCoords.tr.x) < edgedetection) { 
      activeObject.left = targ.left + targ.currentWidth; 

     } 
     if (Math.abs(activeObject.oCoords.br.y - targ.oCoords.tr.y) < edgedetection) { 
      activeObject.top = targ.top - activeObject.currentHeight; 
     } 
     if (Math.abs(targ.oCoords.br.y - activeObject.oCoords.tr.y) < edgedetection) { 
      activeObject.top = targ.top + targ.currentHeight; 
     } 
     if (activeObject.intersectsWithObject(targ) && targ.intersectsWithObject(activeObject)) { 

     } else { 
      targ.strokeWidth = 0; 
      targ.stroke = false; 


     } 
     if (!activeObject.intersectsWithObject(targ)) { 
      activeObject.strokeWidth = 0; 
      activeObject.stroke = false; 
      activeObject === targ 
     } 
    }); 
}); 
} 

Answer 1

Vedi Jsfiddle qui, aggiungo la funzione per fare questo.

function draggable(object) { 
    object.on('mousedown', function() { 
     var temp = this.clone(); 
     temp.set({ 
      hasControls: false, 
      hasBorders: false, 
     }); 
     canvas.add(temp); 
     draggable(temp); 
    }); 
    object.on('mouseup', function() { 
     // Remove an event handler 
     this.off('mousedown'); 

     // Comment this will let the clone object able to be removed by drag it to menu bar 
     // this.off('mouseup'); 

     // Remove the object if its position is in menu bar 
     if(this.top<=75) { 
      canvas.remove(this); 
     } 
    }); 
} 

draggable(squareBtn); 
draggable(circleBtn); 
draggable(triangleBtn);