让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>

我希望能够使用现有的canvas元素来替代kinetic.js创建自己的canvas元素。这个可行吗？

之前有一个类似的问题被问到过，但是似乎没有提供正确的答案。

有什么想法吗？谢谢！

- Brannon

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

- markE

---

我正在尝试让Kinetic使用现有的画布作为其舞台，而不是创建另一个画布的Kinetic图像对象。我希望Kinetic能够将Kinetic层应用于我创建的画布，而不是通过实例化Kinetic.Stage来完成。 - Brannon

明白了...将现有的HTML画布插入Kinetic是不可能的--这就像苹果和橙子。然而，“像素就是像素--没有什么区别”。由于HTML画布只是像素，因此您可以使用这些像素轻松地填充Kinetic.Image。如果您正在使用HTML画布进行某些动态操作，只需（1）var kImage=Kinetic.Image，每当HTML画布更新时执行（2）kImage.setImage(canvas2Image)。如果您已经为HTML画布创建了“智能对象”，则您的任务是将这些JS对象转换为Kinetic对象。干杯！ - markE

另一个想法：Kinetic.Shape为您提供了一个空白的画布，您可以使用常规上下文命令在该画布上绘制。因此，您可以在html画布上执行的任何操作，并轻松地在Kinetic.Shape上执行相同的操作：http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-shape-tutorial/（警告：对于Kinetic.Shape提供给您的此画布/上下文存在某些限制。它们基本上是围绕实际的html canvas+context的完全功能包装器。您可以使用this.getContext()._context获取实际上下文。） - markE