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>

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

以前曾问过similar question，但它似乎没有提供正确答案。

有什么想法吗？谢谢！

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();

使kineticjs使用现有的画布

1 个答案: