使用dynamicjs制作拖放畫布對象

Question

我在工具欄中有多個畫布對象。 我想為小提琴之類的畫布對象添加拖放功能。 我怎樣才能做到這一點？

JS代碼

  $(function(){   
   var stage = new Kinetic.Stage({
        container: 'toolbar',
        width: 350px,
        height: 350px
   });
  var layer = new Kinetic.Layer();
  stage.add(layer);
  var line = new Kinetic.Shape({
      x:0,
      y:0,
      stroke:"blue",
      fill: 'black',
      drawFunc: function(context) {
        context.beginPath();
        context.moveTo(20,5);
        context.quadraticCurveTo(10, 35, 20, 60);
        context.moveTo(20,5);
        context.quadraticCurveTo(30, 35, 20, 60);
        context.fillStrokeShape(this);
      }
    });
    var line2 = new Kinetic.Rect({
        x: 60,
        y: 8,
        width: 40,
        height: 40,
        fill: "red",        
    });     
    layer.add(line);
    layer.add(line2);
    layer.draw();
 });

Answer 1

畫布內容不能從畫布元素中拖出。

因此，如果頂部工具欄是包含畫布形狀的畫布，則不能將這些形狀從工具欄拖到下面的第二個畫布上。

幾種解決方法：

1. 代替使用工具欄div和畫布放置區，制作1個可以同時繪制工具欄和放置區的畫布。 這樣，您可以將內容從畫布的頂部（工具欄所在的位置）拖動到畫布的底部（放置區所在的位置）。

2. 將每個形狀變成圖像。 您可以通過以下方式做到這一點：

   • 在畫布元素上繪制1個形狀。
   • 使用context.getDataURL獲取畫布的dataURL。
   • 使用dataURL作為源創建一個新的Image（）對象。
   • 將新創建的形狀圖像放入工具欄。
   • 對其他每個形狀重復上述步驟。

祝您項目順利！