Comment append des mouvements à la courbe de Bézier dans kineticjs?

Je l’ai fait sans cinétique. Ce morceau de code fonctionne à merveille comme je le voulais. –fiddle sans kineticjs. Regarde

Maintenant, je veux faire le même code avec kineticjs. Voici ce que j’ai fait jusqu’à présent: le clavier avec kineticjs .

Les lignes ne bougent pas du tout – où est-ce que je me trompe? J’ai passé toute la journée mais je ne pouvais pas comprendre le problème.

C’est mon code javascript avec kinetic. Les résultats ne sont pas visibles dans le violon car il n’ya pas d’option permettant d’inclure kinetic.si j’ai mis mon code là-bas. Toute aide est la bienvenue.

var stage=new Kinetic.Stage({ container:'container', width:500, height:500 }); var layer=new Kinetic.Layer(); var bg=new Kinetic.Rect({ x:0, y:0, width:stage.getWidth(), height:stage.getHeight(), fill: 'antiquewhite' }); layer.add(bg); var drawHair = function(canvas) { var context = canvas.getContext(); context.beginPath(); context.moveTo(this.attrs.sx, this.attrs.sy); context.bezierCurveTo(this.attrs.cp1x, this.attrs.cp1y, this.attrs.cp2x, this.attrs.cp2y, this.attrs.endx, this.attrs.endy); context.closePath(); canvas.fillStroke(this); }; function Hair(a, b, c, d, e, f, g, h) { return new Kinetic.Shape({ drawFunc: drawHair, fill: '#000', lineJoin: 'round', stroke: 'grey', strokeWidth: 8, sx: 136 + a,//start position of curve.used in moveTo(sx,sy) sy: 235 + b, cp1x: 136 + c,//control point 1 cp1y: 222 + d, cp2x: 136 + e,//control point 2 cp2y: 222 + f, endx: 136 + g,//end points endy: 210 + h }); } var hd =[]; function init(){//this function draws each hair/curve hd.push(new Hair(0, 0, 0, 0, 0, 0, 0, 0)); layer.add(hd[0]); hd.push(new Hair(15, 0, 15, 0, 15, 0, 15, 0)); layer.add(hd[1]); hd.push(new Hair(30, 0, 30, 0, 30, 0, 30, 0)); layer.add(hd[2]); hd.push(new Hair(45, 0, 45, 0, 45, 0, 45, 0)); layer.add(hd[3]); hd.push(new Hair(60, 0, 60, 0, 60, 0, 60, 0)); layer.add(hd[4]); hd.push(new Hair(75, 0, 75, 0, 75, 0, 75, 0)); layer.add(hd[5]); hd.push(new Hair(90, 0, 90, 0, 90, 0, 90, 0)); layer.add(hd[6]); hd.push(new Hair(105, 0, 105, 0, 105, 0, 105, 0)); layer.add(hd[7]); hd.push(new Hair(120, 0, 120, 0, 120, 0, 120, 0)); layer.add(hd[8]); stage.add(layer); } var bend1=0; var bend2=0; var bend3=0; var bend4=0; var bend5=0; var bend6=0; var bend7=0; var bend8=0; var bend9=0; stage.on('mousemove', function() { var ref1=135;//this is ref point for hair or curve no 1 var ref2=150;//hair no 2 and so on var ref3=165; var ref4=180; var ref5=195; var ref6=210; var ref7=225; var ref8=240; var ref9=255; var pos = stage.getMousePosition(); console.log("x="+pos.x+"&&"+"y="+pos.y) if(between(pos.x,115,270) && between(pos.y,205,236)) { if(pos.x>=ref1 && pos.x<=145){bend1=(pos.x-ref1)*(2.2);} if(pos.x=125){bend1=(pos.x-ref1)*(2.2);} if(pos.x>=ref2 && pos.x<=160){bend2=(pos.x-ref2)*(2.2);} if(pos.x=140){bend2=(pos.x-ref2)*(2.2);} if(pos.x>=ref3 && pos.x<=175){bend3=(pos.x-ref3)*(2.2);} if(pos.x=155){bend3=(pos.x-ref3)*(2.2);} if(pos.x>=ref4 && pos.x<=190){bend4=(pos.x-ref4)*(2.2);} if(pos.x=170){bend4=(pos.x-ref4)*(2.2);} if(pos.x>=ref5 && pos.x<=205){bend5=(pos.x-ref5)*(2.2);} if(pos.x=185){bend5=(pos.x-ref5)*(2.2);} if(pos.x>=ref6 && pos.x<=220){bend6=(pos.x-ref6)*(2.2);} if(pos.x=200){bend6=(pos.x-ref6)*(2.2);} if(pos.x>=ref7 && pos.x<=235){bend7=(pos.x-ref7)*(2.2);} if(pos.x=215){bend7=(pos.x-ref7)*(2.2);} if(pos.x>=ref8 && pos.x<=250){bend8=(pos.x-ref8)*(2.2);} if(pos.x=230){bend8=(pos.x-ref8)*(2.2);} if(pos.x>=ref9 && pos.x<=265){bend9=(pos.x-ref9)*(2.2);} if(pos.x=245){bend9=(pos.x-ref9)*(2.2);} } hd.push(new Hair(0, 0, 0, 0, 0, 0, 0+bend1, 0)); layer.add(hd[0]); hd.push(new Hair(15, 0, 15, 0, 15, 0, 15+bend2, 0)); layer.add(hd[1]); hd.push(new Hair(30, 0, 30, 0, 30, 0, 30+bend3, 0)); layer.add(hd[2]); hd.push(new Hair(45, 0, 45, 0, 45, 0, 45+bend4, 0)); layer.add(hd[3]); hd.push(new Hair(60, 0, 60, 0, 60, 0, 60+bend5, 0)); layer.add(hd[4]); hd.push(new Hair(75, 0, 75, 0, 75, 0, 75+bend6, 0)); layer.add(hd[5]); hd.push(new Hair(90, 0, 90, 0, 90, 0, 90+bend7, 0)); layer.add(hd[6]); hd.push(new Hair(105, 0, 105, 0, 105, 0, 105+bend8, 0)); layer.add(hd[7]); hd.push(new Hair(120, 0, 120, 0, 120, 0, 120+bend9, 0)); layer.add(hd[8]); stage.add(layer); console.log("bend1="+bend1); }); function between(val, min, max) { return val >= min && val <= max; } window.onload = function() { init(); };

Problème:

Vous ajoutez 9 objects Shape supplémentaires à chaque événement de déplacement de souris d’étape.

Cela signifie que vous créez rapidement des centaines (milliers) de cheveux.

Commencez avec une refonte où vous n’avez que 9 cheveux.

Pendant les événements mousemove, vous répondez en modifiant la position de chaque cheveu dans drawFunc .

[Edité pour inclure un exemple de code]

Vous pouvez créer un cheveu «intelligent» qui écoute si la souris est dessus et qui se plie en conséquence.

Ensuite, vous pouvez append autant de cheveux intelligents que nécessaire.

Vous n’avez pas besoin de suivre ce qu’ils font, car chacun contient assez d’informations + de code pour se plier correctement.

Comme il ne s’agit que d’un exemple pédagogique, j’ai simplifié vos courbes en une ligne en 2 parties qui est verticale en bas et «pliée» en haut.

entrez la description de l'image ici

Voici la fonction de dessin pour la forme de cheveux personnalisée. Le haut de la ligne est “plié” vers la position de la souris. Si la souris s’est déplacée à l’intérieur de la zone de réponse des poils, la propriété hairs endX sera définie sur la position mouseX. Cela provoque le pliage des cheveux vers la sourisX.

 drawFunc: function(canvas){ if(mouseX>=this.attrs.respondLeft && mouseX<=this.attrs.respondRight){ this.attrs.endX=mouseX; } var context = canvas.getContext(); context.beginPath(); context.moveTo(this.attrs.startX,this.attrs.bottomY); context.lineTo(this.attrs.startX,this.attrs.midY); context.lineTo(this.attrs.endX,this.attrs.topY); canvas.fillStroke(this); },

Puisque nous voulons que les cheveux se plient lorsque la souris passe dessus, nous ajoutons un gestionnaire d'événements mousemove pour la scène. Lorsque la souris se déplace, la position mouseX est mise à jour. Lorsque les cheveux sont redessinés, ils seront pliés à la sourisX.

 stage.on('mousemove', function() { // set the endX where the hair will bend to mouseX=stage.getMousePosition().x; // redraw the layer layer.draw(); });

Le code de travail ci-dessous est un peu plus compliqué car chaque cheveu stocke ses propres informations sur la façon de se dessiner et sur sa zone de frappe.

Voici le code et un violon: http://jsfiddle.net/m1erickson/ey38w/

     Prototype

[Mots d'encouragement supplémentaires]

Ce modèle fonctionnera pour vous.

Oui… même pour vos courbes de Bézier.

Mais ce n’est qu’un sharepoint départ que vous devez adapter à votre propre projet.

Par exemple, dans votre code d'origine, vous avez suivi ces étapes

Écouter les événements de souris et les gérer (votre fonction de déplacement),
Déterminez si la position de la souris doit affecter vos cheveux,
Si c'est le cas, recalculez les points de contrôle + fin (votre fonction init).
Redessiner les cheveux (c'est seulement maintenant que vous savez redessiner les cheveux existants - pas en créer de nouveaux),

Modifiez donc ces codes dans ce motif!

Non, vous ne pouvez pas simplement couper-coller. Vous devrez modifier, améliorer, adapter.

Pour commencer, optez pour 1 cheveu Bézier comme vous le souhaitez.

Alors, pas avant, prenez cet indice:

Au lieu d’avoir une forme cinétique distincte pour chaque cheveu, créez un object Shape et dessinez tous vos cheveux dans drawFunc. C'est plus performant. En outre, vous pouvez écouter le déplacement de la souris sur cette forme au lieu de la totalité de la canvas. Encore une fois, plus performant.

Avant tout — Apprenez !: (1) Expérience (2) Test, (3) Adaptation, (4) N'abandonnez pas, (5) Répétez l'opération n ° 1.

KineticJS prend désormais en charge l’interpolation de splines, ce qui signifie que vous pouvez facilement animer les points le long d’une courbe. Découvrez cet exemple:

http://www.html5canvastutorials.com/labs/html5-canvas-animated-clown-face/