HTML5 캔버스에서 실제 마우스 위치를 얻는 방법은 무엇입니까?

캔버스의 실제 마우스 위치

마우스 커서를 사용하여 HTML5 캔버스 내에서 그리려면 캔버스를 원점(0,0)에 배치해야 하는 경우가 많습니다. ) 상위 컨테이너 내. 그러나 캔버스 위치를 원점에서 벗어나게 조정하면 그릴 때 불일치가 발생할 수 있습니다.

간단한 1:1 시나리오

캔버스 요소의 크기가 비트맵 크기(1 :1 비율), 다음 스니펫을 사용하여 마우스 위치를 캡처합니다.

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

이 방법을 이벤트에 통합하여 다음을 제공합니다. 이벤트와 캔버스를 인수로 사용합니다. x 및 y 마우스 위치를 자세히 설명하는 객체를 반환합니다. 요소 자체와 정렬되도록 캔버스 위치를 뺍니다.

var canvas = document.getElementById("imgCanvas");
var context = canvas.getContext("2d");

function draw(evt) {
  var pos = getMousePos(canvas, evt);

  context.fillStyle = "#000000";
  context.fillRect(pos.x, pos.y, 4, 4);
}

크기가 다른 요소와 비트맵

CSS 크기 조정이나 픽셀 측면의 차이 등으로 인해 캔버스와 비트맵의 크기가 다른 경우 비율에 따라 다음과 같이 계산을 조정합니다.

function getMousePos(canvas, evt) {
  var rect = canvas.getBoundingClientRect(), // abs. size of element
    scaleX = canvas.width / rect.width, // relationship bitmap vs. element for x
    scaleY = canvas.height / rect.height; // relationship bitmap vs. element for y

  return {
    x: (evt.clientX - rect.left) * scaleX, // scale mouse coordinates after adjusting for element relativity
    y: (evt.clientY - rect.top) * scaleY // scale mouse coordinates after adjusting for element relativity
  };
}

컨텍스트 변환 적용됨

캔버스 컨텍스트가 회전 또는 크기 조정과 같은 변환을 거친 경우 이를 설명하기 위해 현재 행렬의 역수를 계산합니다. 최신 브라우저는 currentTransform 속성을 통해 현재 변환에 대한 액세스를 제공하는 반면 Firefox는 mozCurrentTransformInverted를 통해 역행렬을 제공합니다.

사용자 지정 행렬 계산이 필요한 경우 자체 솔루션을 구현하거나 다음에서 제공되는 것과 같은 기존 라이브러리를 활용하세요. 사용자 정의 행렬 솔루션](https://github.com/bebraw/calcGeometryFromPointOnTransformedCanvas)

역행렬을 요소의 상대성을 조정한 후 마우스 좌표를 조정하여 올바른 마우스 위치에 정렬합니다.

var pos = getMousePos(canvas, e); // get adjusted coordinates as described above
var imatrix = matrix.inverse(); // obtain the inverse matrix somehow
pos = imatrix.applyToPoint(pos.x, pos.y); // apply inverse matrix to adjusted coordinate

context.fillStyle = "#000000";
context.fillRect(pos.x - 1, pos.y - 1, 2, 2);

또는 currentTransform 사용이 가능한 경우:

var pos = getMousePos(canvas, e); // get adjusted coordinates as described above
var matrix = ctx.currentTransform; // W3C (future)
var imatrix = matrix.invertSelf(); // invert

// apply to point:
var x = pos.x * imatrix.a + pos.y * imatrix.c + imatrix.e;
var y = pos.x * imatrix.b + pos.y * imatrix.d + imatrix.f;

더 단순화하려면 포괄적인 라이브러리 활용을 고려하세요. 마지막 코드 블록에서 언급한 무료 MIT 라이센스와 같이 이러한 모든 단계를 처리합니다.

위 내용은 HTML5 캔버스에서 실제 마우스 위치를 얻는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!