찾기 캔버스 회전

Question

0이에 의해 0, -70 후 좌표

ctx.strokeStyle = "red"; 
ctx.lineWidth = 2; 
ctx.rotate(Math.PI/-10;); 
ctx.beginPath(); 
ctx.moveTo(0,0); 
ctx.lineTo(0,-70); 
ctx.stroke(); 

그리고 'PI/-10'가 있음을 회전 할 수 있으며, 그 작동합니다.

어떻게 회전 후이 x, y 점을 얻을 수 있습니까?

Answer 1

x 및 y 포인트는 변환 (회전)과 관련하여 여전히 0과 -70입니다. 기본적으로 캔버스에서 볼 수있는 결과 위치를 얻기 위해 행렬을 "리버스 엔지니어링"해야합니다.

-10도에서 70 픽셀이되는 선을 계산하려는 경우 간단한 삼각법을 사용하여 직접 계산할 수 있습니다 (행렬에서 거꾸로 정렬하는 것보다 쉽습니다).

컨텍스트, 선의 시작 위치 (x, y), 그리는 선의 길이 (픽셀) 및 각도 (도)를 사용하는 이와 같은 함수를 사용할 수 있습니다. 그것은 라인을 그리고 그 줄의 끝 지점에 대한 x 및 y와 객체를 반환

function lineToAngle(ctx, x1, y1, length, angle) { 

    angle *= Math.PI/180; 

    var x2 = x1 + length * Math.cos(angle), 
     y2 = y1 + length * Math.sin(angle); 

    ctx.moveTo(x1, y1); 
    ctx.lineTo(x2, y2); 
    ctx.stroke(); 

    return {x: x2, y: y2}; 
} 

그럼 그냥 같이 전화 :

var pos = lineToAngle(ctx, 0, 0, 70, -10); 

//show result of end point 
console.log('x:', pos.x.toFixed(2), 'y:', pos.y.toFixed(2)); 

결과 :

x: 68.94 y: -12.16 

또는 대신 캔버스의 컨텍스트를 다음과 같이 확장 할 수 있습니다.

if (typeof CanvasRenderingContext2D !== 'undefined') { 

    CanvasRenderingContext2D.prototype.lineToAngle = 
     function(x1, y1, length, angle) { 

      angle *= Math.PI/180; 

      var x2 = x1 + length * Math.cos(angle), 
       y2 = y1 + length * Math.sin(angle); 

      this.moveTo(x1, y1); 
      this.lineTo(x2, y2); 

      return {x: x2, y: y2}; 
     } 
} 

그리고는 다음과 같이 귀하의 상황에 직접 사용

var pos = ctx.lineToAngle(100, 100, 70, -10); 
ctx.stroke(); //we stroke separately to allow this being used in a path 

console.log('x:', pos.x.toFixed(2), 'y:', pos.y.toFixed(2)); 

(0도 오른쪽으로 가리 킵니다).

Answer 2

"변환을 설정 한 후에 어떻게 변환을 통해 점을 실행할 수 있습니까?"

이 경우 HTML5 Canvas get transform matrix?을 참조하십시오. 질의 응답은 다소 오래되었지만 최신으로 보입니다. 변환 매트릭스에 액세스하고 사용할 수있는 현재 HTML5 사양에서 찾을 수있는 항목이 없습니다. (이론적으로는 context.currentTransform을 통해 액세스 할 수 있지만 매트릭스를 사용할 수있는 기능은 표시되지 않습니다. 매트릭스를 통해 포인트를 늘리거나 포인트 벡터에 대해 전체 SVGMatrix를 만들어 가짜로 만들어야합니다. .)

위로 대답은 사용할 수있는 변환 클래스를 보여줍니다. 이를 통해 변경 사항을 추적하고 transformPoint 함수를 사용하여 끝점으로 변환하려는 포인트를 가져옵니다.