javascript - 使用kineticjs制作拖放 Canvas 对象

Question

我的工具栏中有多个 Canvas 对象。我想向 Canvas 对象添加拖放功能，例如 fiddle 。我该如何做到这一点？

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

Canvas 内容无法从 Canvas 元素中拖出。

因此，如果您的顶部工具栏是包含 Canvas 形状的 Canvas ，则无法将这些形状从工具栏拖到下面的第二个 Canvas 上。

几种解决方法:

1. 不要使用工具栏 div 和 Canvas 放置区，而是制作 1 个 Canvas 来绘制工具栏和放置区。这样，您就可以将内容从 Canvas 顶部(工具栏所在位置)拖动到 Canvas 底部(拖放区所在位置)。

2. 将每个形状变成图像。您可以通过以下方式执行此操作:

   • 在 Canvas 元素上绘制 1 个形状。
   • 使用 context.getDataURL 获取 Canvas 的 dataURL。
   • 使用 dataURL 作为源创建一个新的 Image() 对象。
   • 将新创建的形状图像放入工具栏中。
   • 对每个其他形状重复此操作。

祝您的项目顺利!