회전 할 때 반응이있는 캔버스에서 그리기 이상한 것들을 수행

Question

나는 반응 구성 요소에 캔버스를 그려하려고합니다. 이 구성 요소는 전달 된 배열의 길이에 따라 선과 여러 개의 사각형을 그립니다.이 사각형은 다른 소품에 따라 회전하는 소품으로 그립니다. 5 차 반복에 도달 할 때까지 완벽하게 그려지는 루프가 있습니다. 그러면 어떤 일이 발생하고 회전 후 컨텍스트 복원이 엉망이됩니다. 해당 루프에 하나의 값 변경 만 있습니다 (initialX) 브라우저에서 루프를 디버깅하는 경우 rotate 메서드는 복원과 동일한 횟수로 호출됩니다. 나는이 행동에 대해 정말로 혼란 스럽다. 그것은 아주 단순한 무승부이며, 나는 나의 실수가 어디인지를 볼 수 없다.

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> 
 
     ) 
 
    } 
 
};

Answer 1

당신은 각 반복에서 컨텍스트를 복원하고 있지만, 당신이 그것을 저장하지

This is the same sketch without applying rotation

This is what I'm getting

.

ctx2.save()을 추가하면 올바르게 작동합니다.

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 
}