Question

我需要给画布我已经开始上课，但我不知道该怎么做。道歉，如果这是一个愚蠢的问题，我已经破坏了我的头脑。

非常感谢任何帮助，

梅丽莎

 function initCanvas(id) {
    stage = new Kinetic.Stage({
    container: id,
    width: 850,
    height: 500

    });
    layer = new Kinetic.Layer();
    stage.add(layer);
    stage.draw();
  }

Answer 1

每次创建新的Kinetic.Layer时，您都在创建一个新的画布“类”（一个新的画布）。

Kinetic.Stage是Kinetic.Layers（画布）的集合，它们都直接位于舞台的顶部。

所以这会创建一个Stage容器：

stage = new Kinetic.Stage({
    container: id,
    width: 850,
    height: 500
});

这会在该舞台上创建一个新图层（该舞台顶部的1个新画布）

layerBottom = new Kinetic.Layer();
stage.add(layerBottom);

新图层的大小始终与其父级完全相同。
新图层始终直接位于其父级的顶部。

此代码在该舞台上创建第二层（该舞台顶部的另一个画布）

layerTop = new Kinetic.Layer();
stage.add(layerTop);

layerTop始终与其父级完全相同。
layerTop始终直接位于其父级的顶部。
layerTop位于layerBottom

您可以在layerBottom和layerTop上绘制动力学形状。

2层真正“分层”。

如果在layerBottom和同一x / y上的layerTop上绘制Kinetic.Rect，则layerTop Rect将隐藏layerBottom Rect，但两个Rect仍然存在。

var rectBottom=new Kinetic.Rect({
    x:20,
    y:20,
    width:50,
    height:50,
    fill:"red"
});
layerBottom.add(rectBottom);

var rectTop=new Kinetic.Rect({
    x:20,
    y:20,
    width:50,
    height:50,
    fill:"red"
});
layerTop.add(rectTop);

Answer 2

请查看此示例http://www.html5canvastutorials.com/kineticjs/html5-canvas-drag-and-drop-bounds-tutorial-with-kineticjs/，以清楚了解阶段和图层的工作原理

给画布上课

2 个答案: