तो यह दोनों सरल है लेकिन लगता है की तुलना में थोड़ा अधिक जटिल विषय है।
सबसे पहले आम तौर पर यहाँ भ्रमित प्रश्न हैं
तत्व सापेक्ष माउस निर्देशांक कैसे प्राप्त करें
2 डी कैनवास एपीआई या वेबजीएल के लिए कैनवास पिक्सेल माउस निर्देशांक कैसे प्राप्त करें
तो, जवाब
तत्व सापेक्ष माउस निर्देशांक कैसे प्राप्त करें
तत्व एक कैनवास हो रहा है या नहीं तत्व सापेक्ष माउस निर्देशांक सभी तत्वों के लिए समान है।
प्रश्न के 2 सरल उत्तर हैं "कैनवास सापेक्ष माउस निर्देशांक कैसे प्राप्त करें"
सरल उत्तर # 1 उपयोग offsetXऔरoffsetY
canvas.addEventListner('mousemove', (e) => {
const x = e.offsetX;
const y = e.offsetY;
});
यह उत्तर क्रोम, फ़ायरफ़ॉक्स और सफारी में काम करता है। अन्य सभी ईवेंट मानों के विपरीत offsetXऔर offsetYCSS रूपांतरण को ध्यान में रखें।
2019/05 के साथ सबसे बड़ी समस्या है offsetXऔर offsetYवे टच इवेंट्स में मौजूद नहीं हैं और इसलिए इसका इस्तेमाल iOS सफारी के साथ नहीं किया जा सकता है। वे पॉइंटर घटनाओं पर मौजूद हैं जो क्रोम और फ़ायरफ़ॉक्स में मौजूद हैं, लेकिन सफारी नहीं हैं, हालांकि जाहिर तौर पर सफारी इस पर काम कर रहा है ।
एक और मुद्दा यह है कि घटनाएँ कैनवास पर ही होनी चाहिए। यदि आप उन्हें किसी अन्य तत्व या खिड़की पर रखते हैं तो आप बाद में कैनवास को अपना संदर्भ बिंदु नहीं चुन सकते हैं।
सरल उत्तर # 2 उपयोग clientX, clientYऔरcanvas.getBoundingClientRect
आप सीएसएस रूपांतरण के बारे में परवाह नहीं है, तो अगले सरल जवाब कॉल करने के लिए है 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;
});
यह तब तक काम करेगा जब तक कि कोई सीएसएस ट्रांसफॉर्म न हो। यह टच इवेंट्स के साथ भी काम करता है और इसलिए सफारी आईओएस के साथ काम करेगा
canvas.addEventListener('touchmove', (e) => {
const rect = canvas. getBoundingClientRect();
const x = e.touches[0].clientX - rect.left;
const y = e.touches[0].clientY - rect.top;
});
2 डी कैनवास एपीआई के लिए कैनवास पिक्सेल माउस निर्देशांक कैसे प्राप्त करें
इसके लिए हमें उन मूल्यों को लेने की जरूरत है जो हमने ऊपर उठाई हैं और जिस आकार को कैनवास में दिखाया गया है, उससे कैनवास में खुद को बदल दिया है
साथ 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>