캔버스의 원점을 중앙으로 변경하는 방법은 무엇입니까?

Question

저는 html5와 JavaScript에 익숙하지 않습니다. 좌표계에서 점과 선을 다루는 프로그램을 작성하고 있습니다 만, html5에 대한 캔버스의 원점이 상단 모서리에 있음을 알고 있으므로 좌표계를 작성하고 싶습니다. 캔버스의 중심을 원점으로 삼아 번역 방법을 시도하고 다음 방법을 사용하여 마우스가 어디에 있는지 (이상적으로는 마우스가 캔버스의 중앙에있을 때 0 : 0으로 표시하려는 경우) 인쇄합니다. 그러나 그것은 작동하지 않습니다

var mousePos = getMousePos(canvas1, evt); 
mouseX = mousePos.x; 
mouseY = mousePos.y; 
var message = 'Mouse position: ' + mousePos.x + ',' + mousePos.y; 
writeMessage(document.getElementById("canvas_prime_coor"), message); 

function writeMessage(canvas, message) { 
    var context = canvas.getContext('2d'); 
    context.clearRect(0, 0, canvas.width, canvas.height); 
    context.font = '18pt Calibri'; 
    context.fillStyle = 'red'; 
    context.fillText(message, 10, 25); 
} 

function getMousePos(canvas, evt) { 
    var rect = canvas.getBoundingClientRect(); 
    return { 
     x: evt.clientX - rect.left, 
     y: evt.clientY - rect.top}; 
} 

Answer 1

는 당신이 translate() 방법을 사용할 수 있습니다 좌표계를 변경합니다. 그러나 컨텍스트 변환은 요소 자체에 바인딩 된 마우스 좌표에 영향을 미치지 않으므로 별도로 추적해야합니다.

는

수동으로 번역을 추적하고 마우스를 보상해야합니다 좌표 :

var transX = canvas.width * 0.5, 
    transY = canvas.height * 0.5; 

context.translate(transX, transY); 

문제는 이제 두 개의 서로 다른 위치를 처리한다는 것입니다

님의

이

가) 실제 마우스 위치의 상대 소자
b) 좌표는 는 컨텍스트

,617 대한 올바른 것으로 필요

번역 한 다음 마우스 위치를 사용하면 가운데로 번역하면 다음과 같이됩니다.

마우스 좌표가 30,30이라고 가정 해 보겠습니다. 번역 된 컨텍스트에서이 좌표를 사용하면 그래픽은 transX + 30, transY + 30으로 끝나게됩니다. 이는 원하는 것과 다릅니다. 마우스로 그 현재 번역을 추적하고 뺄 필요가이를 보상하기 위해

좌표 :이 도움이

function getMousePos(canvas, evt) { 
    var rect = canvas.getBoundingClientRect(); 
    return { 
     x: evt.clientX - rect.left - transX, 
     y: evt.clientY - rect.top - transY 
    }; 
} 

FIDDLE

희망!