그래서 이것은 단순하지만 다소 복잡한 주제입니다.
우선 여기에는 일반적으로 복잡한 질문이 있습니다.
요소 관련 마우스 좌표를 얻는 방법
2D Canvas API 또는 WebGL에 대한 캔버스 픽셀 마우스 좌표를 얻는 방법
그래서 대답
요소 관련 마우스 좌표를 얻는 방법
요소가 요소 상대 마우스 좌표를 얻는 캔버스인지 여부는 모든 요소에서 동일합니다.
"캔버스 관련 마우스 좌표를 얻는 방법"이라는 질문에 대한 두 가지 간단한 답변이 있습니다.
간단한 답변 # 1 사용 offsetX및offsetY
canvas.addEventListner('mousemove', (e) => {
const x = e.offsetX;
const y = e.offsetY;
});
이 답변은 Chrome, Firefox 및 Safari에서 작동합니다. 다른 모든 이벤트 값 offsetX과 달리offsetY CSS 변환을 고려하십시오.
가장 큰 문제 offsetX와 offsetY그들이 터치 이벤트에 존재하지 않는 등 iOS의 사파리와 함께 사용할 수 없습니다 2019/05의로이다. 그것들은 Chrome과 Firefox에는 존재하지만 Safari는 분명히 작동 하지만 Safari는 아닌 Pointer Events에 존재 합니다. .
또 다른 문제는 이벤트가 캔버스 자체에 있어야한다는 것입니다. 다른 요소 나 창에 놓으면 나중에 참조 지점으로 캔버스를 선택할 수 없습니다.
간단한 대답 # 2 사용 clientX, clientY및canvas.getBoundingClientRect
당신이 CSS의 변환에 대해 걱정하지 않는 경우 다음 간단한 대답은 호출하는 것입니다 canvas. getBoundingClientRect()및 빼기으로부터 왼쪽 clientX과 top에서 clientY와 같이
canvas.addEventListener('mousemove', (e) => {
const rect = canvas.getBoundingClientRect();
const x = e.clientX - rect.left;
const y = e.clientY - rect.top;
});
CSS 변환이없는 한 작동합니다. 터치 이벤트에서도 작동하므로 Safari iOS에서도 작동합니다.
canvas.addEventListener('touchmove', (e) => {
const rect = canvas. getBoundingClientRect();
const x = e.touches[0].clientX - rect.left;
const y = e.touches[0].clientY - rect.top;
});
2D Canvas API에 대한 캔버스 픽셀 마우스 좌표를 얻는 방법
이를 위해 우리는 위에서 얻은 값을 가져 와서 캔버스가 표시되는 크기에서 캔버스 자체의 픽셀 수로 변환해야합니다
와 canvas.getBoundingClientRect와 clientX와clientY
canvas.addEventListener('mousemove', (e) => {
const rect = canvas.getBoundingClientRect();
const elementRelativeX = e.clientX - rect.left;
const elementRelativeY = e.clientY - rect.top;
const canvasRelativeX = elementRelativeX * canvas.width / rect.width;
const canvasRelativeY = elementRelativeY * canvas.height / rect.height;
});
이나와 offsetX와offsetY
canvas.addEventListener('mousemove', (e) => {
const elementRelativeX = e.offsetX;
const elementRelativeX = e.offsetY;
const canvasRelativeX = elementRelativeX * canvas.width / canvas.clientWidth;
const canvasRelativeY = elementRelativeX * canvas.height / canvas.clientHeight;
});
노트 : 모든 경우에 캔버스에 패딩 또는 테두리를 추가하지 마십시오. 그렇게하면 코드가 엄청나게 복잡해집니다. 대신 다른 요소에서 캔버스를 둘러싸는 테두리 또는 패딩을 원하고 외부 요소에 패딩 및 / 또는 테두리를 추가하십시오.
를 사용하는 실제 예 event.offsetX,event.offsetY
[...document.querySelectorAll('canvas')].forEach((canvas) => {
const ctx = canvas.getContext('2d');
ctx.canvas.width = ctx.canvas.clientWidth;
ctx.canvas.height = ctx.canvas.clientHeight;
let count = 0;
function draw(e, radius = 1) {
const pos = {
x: e.offsetX * canvas.width / canvas.clientWidth,
y: e.offsetY * canvas.height / canvas.clientHeight,
};
document.querySelector('#debug').textContent = count;
ctx.beginPath();
ctx.arc(pos.x, pos.y, radius, 0, Math.PI * 2);
ctx.fillStyle = hsl((count++ % 100) / 100, 1, 0.5);
ctx.fill();
}
function preventDefault(e) {
e.preventDefault();
}
if (window.PointerEvent) {
canvas.addEventListener('pointermove', (e) => {
draw(e, Math.max(Math.max(e.width, e.height) / 2, 1));
});
canvas.addEventListener('touchstart', preventDefault, {passive: false});
canvas.addEventListener('touchmove', preventDefault, {passive: false});
} else {
canvas.addEventListener('mousemove', draw);
canvas.addEventListener('mousedown', preventDefault);
}
});
function hsl(h, s, l) {
return `hsl(${h * 360 | 0},${s * 100 | 0}%,${l * 100 | 0}%)`;
}
.scene {
width: 200px;
height: 200px;
perspective: 600px;
}
.cube {
width: 100%;
height: 100%;
position: relative;
transform-style: preserve-3d;
animation-duration: 16s;
animation-name: rotate;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes rotate {
from { transform: translateZ(-100px) rotateX( 0deg) rotateY( 0deg); }
to { transform: translateZ(-100px) rotateX(360deg) rotateY(720deg); }
}
.cube__face {
position: absolute;
width: 200px;
height: 200px;
display: block;
}
.cube__face--front { background: rgba(255, 0, 0, 0.2); transform: rotateY( 0deg) translateZ(100px); }
.cube__face--right { background: rgba(0, 255, 0, 0.2); transform: rotateY( 90deg) translateZ(100px); }
.cube__face--back { background: rgba(0, 0, 255, 0.2); transform: rotateY(180deg) translateZ(100px); }
.cube__face--left { background: rgba(255, 255, 0, 0.2); transform: rotateY(-90deg) translateZ(100px); }
.cube__face--top { background: rgba(0, 255, 255, 0.2); transform: rotateX( 90deg) translateZ(100px); }
.cube__face--bottom { background: rgba(255, 0, 255, 0.2); transform: rotateX(-90deg) translateZ(100px); }
<div class="scene">
<div class="cube">
<canvas class="cube__face cube__face--front"></canvas>
<canvas class="cube__face cube__face--back"></canvas>
<canvas class="cube__face cube__face--right"></canvas>
<canvas class="cube__face cube__face--left"></canvas>
<canvas class="cube__face cube__face--top"></canvas>
<canvas class="cube__face cube__face--bottom"></canvas>
</div>
</div>
<pre id="debug"></pre>
사용 예 작업 canvas.getBoundingClientRect및 event.clientX및event.clientY
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
ctx.canvas.width = ctx.canvas.clientWidth;
ctx.canvas.height = ctx.canvas.clientHeight;
let count = 0;
function draw(e, radius = 1) {
const rect = canvas.getBoundingClientRect();
const pos = {
x: (e.clientX - rect.left) * canvas.width / canvas.clientWidth,
y: (e.clientY - rect.top) * canvas.height / canvas.clientHeight,
};
ctx.beginPath();
ctx.arc(pos.x, pos.y, radius, 0, Math.PI * 2);
ctx.fillStyle = hsl((count++ % 100) / 100, 1, 0.5);
ctx.fill();
}
function preventDefault(e) {
e.preventDefault();
}
if (window.PointerEvent) {
canvas.addEventListener('pointermove', (e) => {
draw(e, Math.max(Math.max(e.width, e.height) / 2, 1));
});
canvas.addEventListener('touchstart', preventDefault, {passive: false});
canvas.addEventListener('touchmove', preventDefault, {passive: false});
} else {
canvas.addEventListener('mousemove', draw);
canvas.addEventListener('mousedown', preventDefault);
}
function hsl(h, s, l) {
return `hsl(${h * 360 | 0},${s * 100 | 0}%,${l * 100 | 0}%)`;
}
canvas { background: #FED; }
<canvas width="400" height="100" style="width: 300px; height: 200px"></canvas>
<div>canvas deliberately has differnt CSS size vs drawingbuffer size</div>