ejemplos - Los switches de orden de capa de HTML5 Canvas & KineticJS se actualizan

create canvas javascript

Question

Estoy construyendo una animación con HTML5 Canvas y KineticJS. La animación funciona bien. Sin embargo, he notado que a veces en la actualización, el orden de las capas de las imágenes que estoy animando se reorganiza. Este cambio en el orden de las capas parece suceder al azar. Por ejemplo, puedo hacer clic en actualizar 5 veces y el orden de las capas está bien ... haga clic en Actualizar otras 3 veces y el orden de las capas se reorganice. ¿Alguien puede ayudarme en por qué ocurre este cambio aleatorio en el orden de las capas?

Answer 1

Este es tu problema aquí:

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);
};

Si desactiva la memoria caché de su navegador, el problema ocurrirá con más frecuencia. Al usar estas 3 funciones de carga, no tiene forma de controlar qué carga de imagen primero. Lo más probable es que se carguen en orden, pero a veces no lo harán. Cualquiera que sea el orden en el que carguen, esa layer se agregará primero y, por lo tanto, a veces estarán fuera de servicio.

Si debe usar 3 capas diferentes para sus 3 imágenes, puede solucionar este problema agregando las capas en orden FUERA de las funciones de 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();
};

Esto garantiza el orden en que se agregan las capas.

También debe usar la función draw() en cada capa después de cargar la imagen, para que pueda ver la imagen en el lienzo. Aquí está el jsfiddle actualizado

Sugerencia:

En lugar de utilizar 3 capas para tus 3 imágenes, usa 1 capa y 3 grupos con cada grupo que contenga 1 imagen (y cualquier otra cosa que necesites agregar dentro de cada grupo). Me gusta esto:

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();
};

Consulte esta pregunta para obtener más información: ¿Cuáles son las diferencias entre el grupo y la capa en KineticJs?

Nota final:

Como última alternativa, probablemente también podría usar la propiedad zIndex para ordenar qué capa (¡o grupo !) Debería aparecer encima de las demás. Kinetic.Container # setZIndex