html5-canvas - HTML5 Canvas 和 KineticJS 图层顺序打开刷新

Question

我正在使用 HTML5 Canvas 和 KineticJS 构建动画。动画效果很好。但是，我注意到有时在刷新时，我正在制作动画的图像的图层顺序会重新排列。这种按层顺序的切换似乎是随机发生的。例如，我可以单击刷新 5 次，图层顺序很好……再单击刷新 3 次，图层顺序重新排列。谁能帮助解释为什么会发生这种按层顺序的随机切换？

Answer 1

这是您的问题：

mac3rdpieceImageObj.onload = function () {
    // add the kinetic image to the layer
    mac3rdpieceLayer.add(mac3rdpiece);
    // add the layer to the stage
    myAnimateStage.add(mac3rdpieceLayer);
};

mac2ndpieceImageObj.onload = function () {
    // add the kinetic image to the layer
    mac2ndpieceLayer.add(mac2ndpiece);
    // add the layer to the stage
    myAnimateStage.add(mac2ndpieceLayer);
};

mac1stpieceImageObj.onload = function () {
    // add the kinetic image to the layer
    mac1stpieceLayer.add(mac1stpiece);
    // add the layer to the stage
    myAnimateStage.add(mac1stpieceLayer);
};

如果您禁用浏览器缓存，问题会更频繁地发生。使用这 3 个 onload 函数，您无法控制首先加载哪个图像。它们可能会按顺序加载，但有时不会。无论它们加载哪个顺序，layer都会首先添加，因此有时它们会乱序。

如果您必须为 3 个图像使用 3 个不同的图层，您可以通过在功能之外按顺序添加图层来解决此问题onload：

myAnimateStage.add(mac3rdpieceLayer); //Add this layer to the stage first,
myAnimateStage.add(mac2ndpieceLayer); //Then this layer.
myAnimateStage.add(mac1stpieceLayer); //Then this layer. This is the top layer because it was added last.

mac3rdpieceImageObj.onload = function () {
    mac3rdpieceLayer.add(mac3rdpiece);
    mac3rdpieceLayer.draw();
};

mac2ndpieceImageObj.onload = function () {
    mac2ndpieceLayer.add(mac2ndpiece);    
    mac2ndpieceLayer.draw();
};

mac1stpieceImageObj.onload = function () {
    mac1stpieceLayer.add(mac1stpiece);    
    mac1stpieceLayer.draw();
};

这保证了添加层的顺序。

您还需要draw()在图像加载后在每个图层上使用该功能，以便您可以在画布上看到图像。这是更新的jsfiddle

建议：

不要为您的 3 张图像使用 3 层，而是使用1 层和 3 个组，每个组包含1 张图像（以及您需要在每个组中添加的任何其他内容）。像这样：

var macLayer = new Kinetic.Layer();
myAnimateStage.add(macLayer);

var mac1stpieceGroup = new Kinetic.Group({
  //I suggest moving each image's (x,y) coordinates inside their group
});
var mac2ndpieceGroup = new Kinetic.Group({
  //And using x:0, y:0 for the actual image coordinates
});
var mac3rdpieceGroup = new Kinetic.Group({
  //That way the group holds the position, and you only have to manage one coordinate per group/image
});

macLayer.add(mac3rdpieceGroup); //Here's the order of your groups
macLayer.add(mac2ndpieceGroup);
macLayer.add(mac1stpieceGroup);

mac3rdpieceImageObj.onload = function () {
    mac3rdpieceGroup.add(mac3rdpiece);
    macLayer.draw();
};

mac2ndpieceImageObj.onload = function () {
    mac2ndpieceGroup.add(mac2ndpiece);    
    macLayer.draw();
};

mac1stpieceImageObj.onload = function () {
    mac1stpieceGroup.add(mac1stpiece);    
    macLayer.draw();
};

有关更多信息，请参阅此问题：KineticJs 中的组和层之间有什么区别

最后注：

作为最后一种选择，您可能还可以使用该zIndex属性来排序应该出现在其他图层之上的图层（或组！）。Kinetic.Container#setZIndex