Tween Kineticjs Images chargées en boucle

Question

J'ai un problème avec les images chargées sur le canevas qui ne sont pas interpolées correctement. J'ai des événements mouseover et mouseout sur chaque image chargée. Je veux que l'image s'agrandisse lorsque le survol de la souris est déclenché et inversée au passage du curseur.

Problème lorsque je souris sur n'importe quelle image, seule la dernière image chargée agrandit et se rétracte.

, ce qui coïncide avec un autre problème que je vais avoir quand l'objet est cliqué, les attributs que je veux transmettre seulement sera le du dernier chargé ..

Comment puis-je me concentre les clics de souris et plane au noeud spécifique et ses attributs de tableau? La réponse peut être un indice, mais vu que je ne suis pas un développeur pro, j'ai besoin d'aide

J'ai essayé une suggestion d'un post similaire ici pour centrer l'événement dans ma situation, intitulé "KineticJS: Play tween after finish autre tween "(ne pas avoir de réputation pour les liens multiples). J'ai essayé le http://jsfiddle.net/cr3jmy2b/30/ suivant en utilisant une partie de l'exemple de code et cela n'a pas fonctionné. Ci-dessous est la partie du code qui charge l'image avec succès et tweens seulement la dernière image (http://jsfiddle.net/cr3jmy2b/27/).

Un grand merci à quelqu'un qui peut aider ou suggérer une manière différente.

var x = 25; 
    var xx = 25; 

    buttonSize = 52 + 10; 




    for(var i=0;i<imgs.length;i++){ 
     if(i > 11){ 
     var img=new Kinetic.Image({ 
      x:xx, 
      y:400, 
      width:45, 
      height:65, 
      image:imgs[i], 
      draggable:true 
     }); l.add(img); xx+=buttonSize; 
     } else { 
     var img=new Kinetic.Image({ 
      x:x, 
      y:320, 
      width:52, 
      height:65, 
      image:imgs[i], 
      draggable:true 
     }); 

     l.add(img); x+=buttonSize; 
    } 
     for(var s=0; s<oweb.length; s++){ 
     var ser = oweb[s]; 
     var sdb = ser.split("_"); 
     var sname = sdb[1]; 
     var sattrib = sdb[2]; 
     var sval = sdb[3]; 
     var sid = sdb[4]; 
     } 


     //l.draw(); 

     var tween = new Kinetic.Tween({ node: img, duration: 1, scaleX: 2, scaleY: 2 }); 
     img.on('mouseover', function(){ tween.play(); console.log("over"); }); 
     img.on('mouseout', function(){ tween.reverse(); console.log("out"); }); 
     img.on('mousedown touchstart', function(){ 
     //document.getElementID(sdb[4]).checked = true; 
     console.log("clicked"); 
     }); l.draw(); 
     } 

    l.draw(); 
}         

Andre

Answer 1

@KirillSlatin ont répondu à cette. Vous m'avez mieux appris avec les images et le code de raccourcissement (Ternary Operator.) J'ai amélioré la kinectics.utilisé layer.batchDraw() pour se débarrasser de la souris hachée et ajouté la méthode d'accélération appropriée pour l'accélération 5.1.0: Kinetic.Easings