使kineticjs使用现有的画布

Question

我试图将kinetic.js与现有画布一起使用。 问题是kinetic.js API要求你指定容器元素的id，然后kinetic.js创建一个Kinetic.Stage （它创建并使用自己的画布）。

例如：

var stage = new Kinetic.Stage({
    container: 'container',
    width: 578,
    height: 200
  });

  var layer = new Kinetic.Layer();

  var rect = new Kinetic.Rect({
    x: 239,
    y: 75,
    width: 100,
    height: 50,
    fill: 'green',
    stroke: 'black',
    strokeWidth: 4
  });

  // add the shape to the layer
  layer.add(rect);

  // add the layer to the stage
  stage.add(layer);
</script>

我希望能够使用kinetic.js的现有canvas元素，而不是创建自己的。 这可能吗？

之前已经提出了类似的问题 ，但它似乎没有提供正确的答案。

有任何想法吗？ 谢谢！

Answer 1

一个html画布只是一堆像素。

您可以将这些像素转换为图像，然后将该图像用作Kinetic.Image的源。

// create an image from the existing canvas

var canvas2Image=new Image();
canvas2Image.onload=function(){

    // create a Kinetic.Image using that image

    var kImage=new Kinetic.Image({
        x:0,
        y:0,
        width:canvas2Image.width,
        height:canvas2Image.height,
        image:canvas2Image
    });

}
canvas2Image.src=canvas.toDataURL();