使用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（）对象。
   • 将新创建的形状图像放入工具栏。
   • 对其他每个形状重复上述步骤。

祝您项目顺利！