2017-10-18 32 views
0

J'essaye de dessiner dans une toile dans un composant de réaction. Le composant dessine une ligne et un certain nombre de carrés en fonction de la longueur d'un tableau qui lui est passé comme des inclinaisons tournant tous en fonction d'un autre accessoire. J'ai une boucle qui le dessine parfaitement jusqu'à ce qu'il atteigne la 5ème itération, alors quelque chose se passe et il commence à jouer avec la restauration du contexte après la rotation. Il n'y a qu'un seul changement de valeur dans cette boucle (initialX) Débogage de la boucle dans le navigateur La méthode rotate est appelée en même temps que la restauration. Je suis vraiment confus par ce comportement, c'est un tirage très simple et je ne peux pas voir où est mon erreur.Dessiner dans la toile avec réagir faire des choses bizarres lors de la rotation

This is what I'm getting

This is the same sketch without applying rotation

class Sketch extends Component { 
 
    constructor(props) { 
 
     super(props); 
 
    } 
 
    componentDidMount() { 
 
     let canvas = document.getElementById("plano"); 
 
     let detector = this.props.detector 
 
     let X, Y; 
 
     if (canvas && canvas.getContext && detector) { 
 
      inicializarCanvas(detector); 
 

 
      function inicializarCanvas(detector) { 
 
       let ctx = canvas.getContext("2d"); 
 
       let s = getComputedStyle(canvas); 
 
       let w = s.width; 
 
       let h = s.height; 
 
       canvas.width = w.split("px")[0]; 
 
       canvas.height = h.split("px")[0]; 
 
       X = canvas.width/2; 
 
       Y = canvas.height/2; 
 

 
       //draw beam 
 
       ctx.moveTo(canvas.width/3, canvas.height/2); 
 
       ctx.lineTo(0, canvas.height/2); 
 
       ctx.strokeStyle = "#f00"; 
 
       ctx.stroke(); 
 
       ctx.restore(); 
 
       ctx.restore(); 
 
       ctx.save(); 
 

 
       drawBlades(ctx, canvas.width, canvas.height, detector) 
 
      } 
 

 
      
 

 
      function drawBlades(ctx, x, y, detector) { 
 
       let initialX = x/3 
 
       let initialY = y/4 
 
       let thick = 20 
 
       let margin = 5 
 
       let rotation = (90 - detector.angle) * Math.PI/180 
 
       let i = 0 
 
       ctx.save(); 
 
       let canvas = document.getElementById("plano"); 
 
       let ctx2 = canvas.getContext("2d"); 
 
       ctx2.save(); 
 
       console.log("blade draw") 
 
       
 
       //This loop is messing up at the 5th iteration 
 
       for (; i < detector.blades.length; i++) { 
 
        ctx2.strokeStyle = "#000000"; 
 
        ctx2.translate(initialX, initialY); 
 
        ctx2.rotate(rotation); 
 
        ctx2.strokeRect(0, 0, thick, y/2); 
 
        ctx2.restore() 
 
        // this is the only variable in that changes of 
 
        // value in the loop 
 
        initialX = margin + thick + initialX 
 
       } 
 
       ctx2.save() 
 
      } 
 
     } 
 
    } 
 

 
    render() { 
 
     return (
 
      <div className='sketch'> 
 
       <canvas width="400" height="150" id="plano"> 
 
        Canvas not compatible with your browser 
 
       </canvas> 
 
      </div> 
 
     ) 
 
    } 
 
};

Répondre

0

Vous restaurez votre contexte dans chaque itération, mais vous ne sauvegardez pas. Essayez d'ajouter un ctx2.save() et cela fonctionnera.

for (; i < detector.blades.length; i++) { 
    ctx2.save(); // save the context 
    ctx2.strokeStyle = "#000000"; 
    ctx2.translate(initialX, initialY); 
    ctx2.rotate(rotation); 
    ctx2.strokeRect(0, 0, thick, y/2); 
    ctx2.restore() 
    // this is the only variable in that changes of 
    // value in the loop 
    initialX = margin + thick + initialX 
} 
+0

/Je savais que c'était quelque chose d'évident. Merci beaucoup – alvcarmona

+0

Une explication pourquoi il dessine les quatre poings correctement et alors ce n'était pas? – alvcarmona