Yani bu hem basit hem de göründüğünden biraz daha karmaşık bir konu.
Öncelikle burada genellikle kapalı sorular var
Eleman göreli fare koordinatları nasıl edinilir
2D Tuval API veya WebGL için tuval piksel fare koordinatları nasıl elde edilir
yani cevaplar
Eleman göreli fare koordinatları nasıl edinilir
Öğenin bir tuval elde etme öğesi olup olmadığı, göreli fare koordinatları tüm öğeler için aynıdır.
"Tuval bağıl fare koordinatları nasıl alınır" sorusuna 2 basit cevap vardır.
Basit cevap # 1 kullanımı offsetXveoffsetY
canvas.addEventListner('mousemove', (e) => {
const x = e.offsetX;
const y = e.offsetY;
});
Bu yanıt Chrome, Firefox ve Safari'de çalışır. Diğer tüm etkinlik değerlerinin aksine offsetXve offsetYdikkate almak CSS dönüştürmeleri.
İle en büyük sorun offsetXve offsetYonlar dokunma etkinliklerine yoktur ve bu yüzden iOS Safari ile kullanılamaz 2019/05 itibariyledir. Görünüşe göre Safari üzerinde çalışmasına rağmen, Chrome ve Firefox'ta bulunan ancak Safari'de bulunmayan Pointer Etkinliklerinde varlar .
Başka bir sorun da olayların tuval üzerinde olması gerektiğidir. Bunları başka bir öğeye veya pencereye koyarsanız, daha sonra referans noktanız olarak tuvali seçemezsiniz.
Cevap basit 2. kullanımı clientX, clientYvecanvas.getBoundingClientRect
Eğer CSS dönüştürmeleri umurumda değil ise bir sonraki en basit cevap aramaktır canvas. getBoundingClientRect()ve çıkarma soldan clientXve topgelen clientYgibi
canvas.addEventListener('mousemove', (e) => {
const rect = canvas.getBoundingClientRect();
const x = e.clientX - rect.left;
const y = e.clientY - rect.top;
});
Bu, CSS dönüşümü olmadığı sürece çalışacaktır. Ayrıca dokunmatik etkinliklerle çalışır ve bu yüzden Safari iOS ile çalışır
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'sı için canvas pixel mouse koordinatları nasıl edinilir
Bunun için yukarıda aldığımız değerleri almalıyız ve kanvasın görüntülendiği boyuttan kanvastaki piksel sayısına dönüştürmeliyiz.
ile canvas.getBoundingClientRectve clientXveclientY
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;
});
veya birlikte offsetXveoffsetY
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;
});
Not: Her durumda, tuvale dolgu veya kenarlık eklemeyin. Bunu yapmak kodu büyük ölçüde karmaşıklaştıracaktır. Bunun yerine, başka bir öğede tuvali çevreleyen bir kenarlık veya dolgu ve dış öğeye dolgu ve / veya kenarlık ekleyin.
Kullanarak çalışma örneği 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>
Kullanılarak örnek çalışma canvas.getBoundingClientRectve event.clientXveevent.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>