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 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>
)
}
};
/Je savais que c'était quelque chose d'évident. Merci beaucoup – alvcarmona
Une explication pourquoi il dessine les quatre poings correctement et alors ce n'était pas? – alvcarmona