KineticJS 创建画布

Question

我很新手，对于JavaScript/Canvas和KineticJS都不太熟悉。

我知道可以这样创建一个画布和一个舞台 -

    <div id="container"></div>
    <script src="http://www.html5canvastutorials.com/libraries/kinetic-v4.3.0-beta2.js"></script>
    <script>
      var stage = new Kinetic.Stage({
        container: 'container',
        width: 578,
        height: 200
      });
    </script>

但是我想知道，如果我已经有了一个画布，那么我如何将其创建为舞台呢？类似于这样的代码...

<canvas id="myCanvas"></canvas>
<script src="http://www.html5canvastutorials.com/libraries/kinetic-v4.3.0-beta2.js"></script>
<script>
    //How do I create a Kinetic.stage of the #myCanvas?
</script>

- Joe Slater

Answer 1

这样怎么样：

创建一个新的舞台。

创建一个新的图层。

创建一个与舞台相同大小的新图像。

将图像的图像源设置为myCanvas。

注意：我没有测试过以下代码，但应该可以正常工作，可能需要微调。

var myCanvasImg=new Kinetic.Image({
      x: 0,
      y: 0,
      image: document.getElementById("myCanvas").getContext("2d").toImageURL(),
      width: stage.getWidth(),
      height: stage.getHeight()
    });

将图像添加到图层中，然后将图层添加到舞台中。

砰...新的舞台与我的画布内容！

- markE

---

完全不复杂...不能按照你的建议在KineticJS中完成！嗯，除非拆开源代码 ;) - markE

我想做的是，我应该有一个对画布本身的引用，以便在KineticJS之外使用。我能否从Kinetic.Stage获取画布及其上下文？ - Joe Slater

请记住，一个舞台是多个图层的容器，每个图层都是一个独立的画布。因此，对于任何特定的图层，var context=myLayer.getContext()将为您获取该图层的上下文。然后，context.canvas将为您获取父画布。但是...从context.canvas返回的是一个只读引用，指向父画布。 - markE

在查阅文档（http://kineticjs.com/docs/Kinetic.Layer.html）后，我发现似乎没有办法将现有的画布与图层关联起来。我是对的吗？你不能将之前创建的画布包含在KineticJS中作为一个图层吗？ - de3

我猜这取决于你对“关联”的定义。任何之前的非Kinetic画布都只是一批像素。您可以创建一个Kinetic图层并在该图层上绘制这些像素。然后，如果您不再需要该先前的画布，则可以将其销毁。此外，您可以使用CSS将该先前的非Kinetic画布移动到Kinetic舞台下方，就像静态背景一样。所以...是的，您可以将先前的非Kinetic画布与Kinetic图层“关联”。但是，先前的画布元素本身无法成为Kinetic图层。 - markE