使用 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 上。

几个解决方法：

不要使用工具栏 div 和 canvas 拖放区，而是制作 1 canvas 来同时绘制工具栏和拖放区。这样您就可以将内容从 canvas 的顶部（工具栏所在的位置）拖动到 canvas 的底部（放置区所在的位置）。
将您的每个形状变成图像。您可以通过以下方式做到这一点：
- 正在 canvas 元素上绘制 1 个形状。
- 使用context.getDataURL获取canvas的dataURL。
- 使用 dataURL 作为源创建一个新的 Image() 对象。
- 将新创建的形状图像放入您的工具栏。
- 对每个其他形状重复。

祝你项目顺利！

使用 kineticjs 拖放 canvas 对象

Make drag and drop canvas object using kineticjs

javascript

kineticjs