Question

工具栏中有多个画布对象。我想为像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元素中拖出。

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

几种解决方法：

不使用工具栏div和画布dropzone，而是使用1个画布来绘制工具栏和放置区域。这样，您可以将内容从画布顶部（工具栏所在的位置）拖动到画布的底部（放置区域所在的位置）。
将每个形状转换为图像。您可以通过以下方式执行此操作：
- 在画布元素上绘制1个形状。
- 使用context.getDataURL获取画布的dataURL。
- 使用dataURL作为源创建一个新的Image（）对象。
- 将新创建的形状图像放入工具栏中。
- 对每个其他形状重复。

祝你的项目好运！

使用kineticjs拖放画布对象

1 个答案: