HTML5 Canvas＆KineticJS层订单刷新开关答案

【问题标题】：HTML5 Canvas & KineticJS layer order switches on refreshHTML5 Canvas＆KineticJS层订单刷新开关
【发布时间】：2013-07-13 14:25:58
【问题描述】：

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

【问题讨论】：

在所有动画完成之前你刷新了吗？
为了能够进一步帮助您，您需要向我们展示一些代码，或者最好是重现问题的 jsfiddle。
@projeqht 这是动画的小提琴jsfiddle.net/BYknR/3
@markE 我只会在动画结束后刷新

标签： html5-canvas kineticjs

【解决方案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();
};

有关更多信息，请参阅此问题：What are the differences between group and layer in KineticJs

最后说明：

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

【讨论】：

非常感谢您的帮助！