সুতরাং এটি উভয়ই সহজ তবে এটি মনে হচ্ছে কিছু জটিল বিষয়।
প্রথমে এখানে সাধারণত বিবাদযুক্ত প্রশ্নগুলি রয়েছে
উপাদান সম্পর্কিত আপেক্ষিক মাউস স্থানাঙ্কগুলি কীভাবে পাবেন
2D ক্যানভাস এপিআই বা ওয়েবজিএলের জন্য ক্যানভাস পিক্সেল মাউস স্থানাঙ্কগুলি কীভাবে পাবেন
সুতরাং, উত্তর
উপাদান সম্পর্কিত আপেক্ষিক মাউস স্থানাঙ্কগুলি কীভাবে পাবেন
উপাদানটি একটি ক্যানভাসের উপাদান সম্পর্কিত মাউস স্থানাঙ্কগুলি পেতে কিনা তা সমস্ত উপাদানগুলির জন্য একই।
"ক্যানভাস আপেক্ষিক মাউস স্থানাঙ্ক কিভাবে পাবেন" প্রশ্নের 2 টি সহজ উত্তর রয়েছে
সহজ উত্তর # 1 ব্যবহার offsetXএবংoffsetY
canvas.addEventListner('mousemove', (e) => {
const x = e.offsetX;
const y = e.offsetY;
});
এই উত্তরটি ক্রোম, ফায়ারফক্স এবং সাফারিতে কাজ করে। অন্যান্য ইভেন্ট ইভেন্টের মতো নয় offsetXএবং offsetYসিএসএস রূপান্তরগুলি অ্যাকাউন্টে নিন।
সঙ্গে সবচেয়ে বড় সমস্যা offsetXএবং offsetY2019/05 এর হিসাবে তারা স্পর্শ ইভেন্টের উপস্থিত না থাকার এবং তাই আইওএস সাফারি সঙ্গে ব্যবহার করা যেতে পারে। এটি পয়েন্টার ইভেন্টগুলিতে রয়েছে যা ক্রোম এবং ফায়ারফক্সে বিদ্যমান তবে সাফারি নয় যদিও দৃশ্যত সাফারি এতে কাজ করছে ।
আরেকটি বিষয় হ'ল ঘটনাগুলি ক্যানভাসে থাকা উচিত। আপনি যদি এগুলিকে অন্য কোনও উপাদান বা উইন্ডোতে রাখেন তবে পরে আপনার রেফারেন্স হিসাবে আপনি ক্যানভাসটি বেছে নিতে পারবেন না।
সহজ উত্তর # 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;
});
2D ক্যানভাস এপিআইয়ের জন্য ক্যানভাস পিক্সেল মাউস স্থানাঙ্কগুলি কীভাবে পাবেন
এর জন্য আমাদের আমাদের যে মানগুলি পেয়েছে সেগুলি গ্রহণ করতে হবে এবং ক্যানভাসটি যে আকার থেকে ক্যানভাস প্রদর্শিত হবে তা থেকে ক্যানভাসের পিক্সেলের সংখ্যায় রূপান্তর করতে হবে
সঙ্গে 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>