HTML5 Canvas& KineticJS层顺序在刷新时切换 [英] HTML5 Canvas & KineticJS layer order switches on refresh

问题描述

我正在使用HTML5 Canvas和KineticJS构建动画。动画效果很好。但是，我注意到有时刷新时，我动画的图像的图层顺序会重新排列。这种层次顺序的切换似乎是随机发生的。例如，我可以单击刷新5次，图层顺序很好...单击刷新另外3次，图层顺序重新排列。任何人都可以帮助为什么这种层顺序的随机切换发生？

I am building an animation with HTML5 Canvas and KineticJS. The animation works just fine. However, I've noticed that sometimes on refresh, the layer order of the images I am animating gets rearranged. This switch in layer order seems to happen at random. For instance, I can click refresh 5 times and the layer order is fine... click refresh another 3 times and the layer order rearranges. Can anyone help as to why this random switch in layer order occurs?

推荐答案

这是你的问题：

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函数，您无法控制首先加载哪个图像。他们可能会按顺序装载，但有时他们不会。无论加载哪个订单，都会先添加图层，因此有时它们会出现故障。

If you disable your browser cache, the problem will occur more often. Using these 3 onload functions, you have no way of controlling which image loads first. Chances are they'll load in order, but sometimes they won't. Whichever order they load in, that layer will be added first, and so sometimes they are out of order.

如果您必须为3张图片使用3个不同的图层，则可以通过添加按 onload functions：

If you must use 3 different layers for your 3 images, you can fix this issue by adding the layers in order OUTSIDE of the onload functions:

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

You also need to use the draw() function on each layer after the image loads, so that you can see the image on the canvas. Here's the updated jsfiddle

建议：

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

Instead of using 3 layers for your 3 images, use 1 Layer and 3 Groups with each Group containing 1 image (and anything else you need to add within each Group). Like this:

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中组和层之间有什么区别

See this question for more information: What are the differences between group and layer in KineticJs

最终注释：

作为最后一种选择，您可能还可以使用 zIndex 属性，用于订购哪一层（或组！）应显示在其他层之上。 Kinetic.Container＃setZIndex

As a last alternative, you could probably also use the zIndex property to order which layer (or group!) should appear on top of the others. Kinetic.Container#setZIndex

这篇关于HTML5 Canvas& KineticJS层顺序在刷新时切换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！