Vì vậy, đây là cả hai đơn giản nhưng một chủ đề phức tạp hơn một chút so với nó có vẻ.
Trước hết thường có những câu hỏi xáo trộn ở đây
Cách lấy tọa độ chuột tương đối
Cách nhận tọa độ chuột pixel canvas cho API Canvas 2D hoặc WebGL
vì vậy, câu trả lời
Cách lấy tọa độ chuột tương đối
Việc phần tử có phải là một khung vẽ hay không, phần tử tương đối tọa độ chuột là như nhau cho tất cả các phần tử.
Có 2 câu trả lời đơn giản cho câu hỏi "Làm thế nào để có được tọa độ chuột tương đối"
Câu trả lời đơn giản số 1 sử dụng offsetXvàoffsetY
canvas.addEventListner('mousemove', (e) => {
const x = e.offsetX;
const y = e.offsetY;
});
Câu trả lời này hoạt động trong Chrome, Firefox và Safari. Không giống như tất cả các giá trị sự kiện khác offsetXvà offsetYđưa các biến đổi CSS vào tài khoản.
Vấn đề lớn nhất với offsetXvà offsetYlà vào năm 2019/05 chúng không tồn tại trên các sự kiện cảm ứng và vì vậy không thể sử dụng với iOS Safari. Chúng tồn tại trên các Sự kiện Con trỏ tồn tại trong Chrome và Firefox chứ không phải Safari mặc dù rõ ràng Safari đang hoạt động trên nó .
Một vấn đề khác là các sự kiện phải nằm trên khung vẽ. Nếu bạn đặt chúng trên một số yếu tố khác hoặc cửa sổ, sau đó bạn không thể chọn khung vẽ làm điểm tham chiếu của mình.
Câu trả lời đơn giản số 2 sử dụng clientX, clientYvàcanvas.getBoundingClientRect
Nếu bạn không quan tâm đến chuyển đổi CSS, câu trả lời đơn giản tiếp theo là gọi canvas. getBoundingClientRect()và trừ bên trái từ clientXvà toptrong clientYnhư trong
canvas.addEventListener('mousemove', (e) => {
const rect = canvas.getBoundingClientRect();
const x = e.clientX - rect.left;
const y = e.clientY - rect.top;
});
Điều này sẽ hoạt động miễn là không có biến đổi CSS. Nó cũng hoạt động với các sự kiện cảm ứng và do đó sẽ hoạt động với 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;
});
Cách nhận tọa độ chuột pixel canvas cho API Canvas 2D
Để làm điều này, chúng ta cần lấy các giá trị chúng ta có ở trên và chuyển đổi từ kích thước của khung vẽ được hiển thị thành số pixel trong chính khung vẽ
với canvas.getBoundingClientRectvà clientXvà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;
});
hoặc với offsetXvà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;
});
Lưu ý: Trong mọi trường hợp, không thêm phần đệm hoặc viền vào khung vẽ. Làm như vậy sẽ làm phức tạp mã. Thay vì bạn muốn có một đường viền hoặc phần đệm bao quanh khung vẽ trong một số phần tử khác và thêm phần đệm và hoặc đường viền cho phần tử bên ngoài.
Ví dụ làm việc bằng cách sử dụng 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>
Ví dụ làm việc sử dụng canvas.getBoundingClientRectvà event.clientXvà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>