Impossible de faire pivoter un élément de canevas correctement

J'essaie d'animer une icône de répétition rotative sur une toile, mais elle ne tourne pas au centre de l'image. Je ne sais pas quoi faire pour le faire tourner correctement.Impossible de faire pivoter un élément de canevas correctement

setInterval(draw, 30); 
    var degrees = 0.0; 

    function draw() { 

     var canvas = document.getElementById('tutorial'); 

     if (canvas.getContext) { 
      var ctx = canvas.getContext('2d'); 
      ctx.clearRect(0, 0, 16, 16); 
      degrees += 0.10; 

      ctx.save(); 

      ctx.translate(8,8); 
      ctx.rotate(degrees); 

      // Draw half open circle 
      ctx.beginPath(); 
      ctx.lineWidth = 2; 
      ctx.arc(8, 8, 6, 0, 1.75 * Math.PI); 
      ctx.stroke(); 

      // Draw arrowhead 
      ctx.lineWidth = 2; 
      ctx.moveTo(13, 1); 
      ctx.lineTo(9, 5); 
      ctx.lineTo(13, 5); 
      ctx.lineTo(13, 1); 
      ctx.stroke(); 

      ctx.restore(); 
     } 
    }

Fiddle: http://jsfiddle.net/xTFkU/

Source

2012-09-13 TomvB

Vous avez été la toile et la rotation d'Translating, mais le dessin en effectuant ensuite vos fonctions de dessin comme si la toile n'a pas été traduit.

Fondamentalement, ce que vous devez faire est de traduire la toile à la moitié de la largeur et la hauteur de l'image que vous dessinez. Cela fera 0.0 le centre de l'image. Ensuite, vous soustrayez le décalage de toutes vos coordonnées.

Ce que je ne faisais ajouter une valeur de décalage qui est votre largeur et la hauteur divisée par 2. Je puis traduis la toile par ce décalage, et soustrayaient cette somme décalée par rapport à toutes les coordonnées.

Working Demo

(function() { 

    setInterval(draw, 30); 
    var degrees = 0.0; 
    var offset = 8; 
    function draw() { 

     var canvas = document.getElementById('tutorial'); 

     if (canvas.getContext) { 
      var ctx = canvas.getContext('2d'); 
      ctx.clearRect(0, 0, 16, 16); 
      degrees += 0.10; 

      ctx.save(); 

      ctx.translate(offset, offset); 
      ctx.rotate(degrees); 

      // Draw half open circle 
      ctx.beginPath(); 
      ctx.lineWidth = 2; 
      ctx.arc(8-offset , 8-offset, 6, 0, 1.75 * Math.PI); 
      ctx.stroke(); 

      // Draw arrowhead 
      ctx.lineWidth = 2; 
      ctx.moveTo(13-offset , 1-offset); 
      ctx.lineTo(9-offset , 5-offset); 
      ctx.lineTo(13-offset , 5-offset); 
      ctx.lineTo(13-offset , 1-offset); 
      ctx.stroke(); 

      ctx.restore(); 
     } 
    } 
})();

Source

2012-09-13 12:52:33 Loktar

Impressionnant, merci! Donc, d'après ce que je comprends, vous ne faites pas pivoter la toile avec son contenu. Au lieu de cela vous changez la rotation du point de départ, donc chaque élément que vous dessinez doit être ajusté pour cela? – TomvB

ouais c'est exactement ça. Im terrible à expliquer c'est un exemple de code que j'ai fait il y a un moment qui fait un meilleur travail pour l'expliquer http://jsfiddle.net/loktar/v86rC/ theres quelques façons de le faire, fondamentalement tout se résume à l'endroit où vous traduire, à partir de là, vous connaissez les compensations dont vous avez besoin. – Loktar

Avec ctx.translate(8,8); vous avez déplacé le origine des coordonnées dans le centre de votre toile, puis mis en rotation. Vous aurez maintenant besoin de peindre un cercle autour du centre (0/0), pas autour du point(): http://jsfiddle.net/xTFkU/4/. Vous pouvez retourner le système de coordonnées mis en rotation par ctx.translate(-8,-8);: http://jsfiddle.net/xTFkU/5/

Source

2012-09-13 13:00:03 Bergi

Impossible de faire pivoter un élément de canevas correctement

Répondre

Questions connexes