ดังนั้นนี่คือทั้งง่าย ๆ แต่เป็นหัวข้อที่ซับซ้อนกว่าเล็กน้อย
ก่อนอื่นมักจะมีคำถามที่ conflated ที่นี่
วิธีรับองค์ประกอบเมาส์สัมพันธ์
วิธีรับพิกัด Canvas pixel Mouse สำหรับ 2D Canvas API หรือ WebGL
ดังนั้นคำตอบ
วิธีรับองค์ประกอบเมาส์สัมพันธ์
ไม่ว่าองค์ประกอบนั้นจะเป็น Canvas หรือไม่รับองค์ประกอบของเมาส์ที่สัมพันธ์กันกับองค์ประกอบทั้งหมด
มีคำตอบง่ายๆ 2 ข้อสำหรับคำถาม "วิธีรับพิกัดของเมาส์เทียบกับผืนผ้าใบ"
คำตอบง่ายๆ # 1 ใช้offsetXและoffsetY
canvas.addEventListner('mousemove', (e) => {
const x = e.offsetX;
const y = e.offsetY;
});
คำตอบนี้ใช้ได้ใน Chrome, Firefox และ Safari ไม่เหมือนกับค่าเหตุการณ์อื่น ๆ ทั้งหมดoffsetXและoffsetYนำการแปลง CSS มาพิจารณา
ปัญหาที่ใหญ่ที่สุดของoffsetXและoffsetYเป็นของ 2019/05 พวกเขาไม่ได้อยู่ในเหตุการณ์ที่สัมผัสและดังนั้นจึงไม่สามารถใช้กับ iOS Safari มีอยู่ในกิจกรรมตัวชี้ซึ่งมีอยู่ใน Chrome และ Firefox แต่ไม่ใช่ Safari แม้ว่าSafari จะทำงานอยู่จะทำงานกับมัน
อีกประเด็นคือเหตุการณ์ต้องอยู่บนผืนผ้าใบเอง หากคุณวางองค์ประกอบเหล่านี้ลงในองค์ประกอบอื่นหรือหน้าต่างคุณจะไม่สามารถเลือกผืนผ้าใบภายหลังเพื่อเป็นจุดอ้างอิงของคุณ
คำตอบง่าย # 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;
});
วิธีรับพิกัดพิกเซลของ Canvas Canvas สำหรับ 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>