আমি কীভাবে জাভাস্ক্রিপ্টে ক্যানভাস উপাদানটির প্রস্থ এবং উচ্চতা পেতে পারি?
এছাড়াও, আমি যে ক্যানভাস সম্পর্কে পড়তে থাকি তার "প্রসঙ্গ" কী?
উত্তর:
টিউটোরিয়ালটি দেখার মতো হতে পারে: এমডিএন ক্যানভাস টিউটোরিয়াল
উপাদানের সেই বৈশিষ্ট্যগুলিতে অ্যাক্সেস করে আপনি কেবল ক্যানভাস উপাদানটির প্রস্থ এবং উচ্চতা পেতে পারেন। উদাহরণ স্বরূপ:
var canvas = document.getElementById('mycanvas');
var width = canvas.width;
var height = canvas.height;
প্রস্থ এবং উচ্চতার বৈশিষ্ট্যগুলি ক্যানভাস উপাদানটিতে উপস্থিত না থাকলে, ডিফল্ট 300x150 আকার ফিরে আসবে। গতিশীলভাবে সঠিক প্রস্থ এবং উচ্চতা পেতে নিম্নলিখিত কোডটি ব্যবহার করুন:
const canvasW = canvas.getBoundingClientRect().width;
const canvasH = canvas.getBoundingClientRect().height;
বা সংক্ষিপ্ত অবজেক্ট ডেস্ট্রাকচারিং সিনট্যাক্স ব্যবহার করে:
const { width, height } = canvas.getBoundingClientRect();
contextএকটি বস্তু আপনি ক্যানভাস থেকে পাওয়া আপনি তা আঁকা অনুমতি দিতে হয়। আপনি contextক্যানভাসের এপিআই হিসাবে ভাবতে পারেন যা আপনাকে এমন কমান্ড সরবরাহ করে যা আপনাকে ক্যানভাস উপাদানটি আঁকতে সক্ষম করে।
widthএবং ট্যাগ ট্যাগ heightহিসাবে সরাসরি নির্দিষ্ট করা হয়<canvas />
ঠিক আছে, এর আগে সমস্ত উত্তর সম্পূর্ণরূপে সঠিক নয়। প্রধান ব্রাউজারগুলির মধ্যে 2 এই 2 টি বৈশিষ্ট্য সমর্থন করে না (IE তাদের মধ্যে একটি) বা তাদের আলাদাভাবে ব্যবহার করে না।
আরও ভাল সমাধান (বেশিরভাগ ব্রাউজার দ্বারা সমর্থিত, তবে আমি সাফারি চেক করিনি):
var canvas = document.getElementById('mycanvas');
var width = canvas.scrollWidth;
var height = canvas.scrollHeight;
কমপক্ষে আমি স্ক্রোলউইথ এবং -হাইট এবং মাপ সেট ক্যানভাস.উইথ এবং উচ্চতা যখন এটি পুনরায় আকার দেওয়া হয় তার সাথে সঠিক মান পাই।
উল্লিখিত উত্তরগুলি canvas.widthক্যানভাসের অভ্যন্তরীণ মাত্রাগুলি প্রদান করে, যেমন উপাদান তৈরি করার সময় নির্দিষ্ট করা:
<canvas width="500" height="200">
আপনি যদি সিএসএসের সাহায্যে ক্যানভাসটিকে আকার দেন, তবে এর DOM মাত্রাগুলি এর মাধ্যমে অ্যাক্সেসযোগ্য .scrollWidthএবং .scrollHeight:
var canvasElem = document.querySelector('canvas');
document.querySelector('#dom-dims').innerHTML = 'Canvas DOM element width x height: ' +
canvasElem.scrollWidth +
' x ' +
canvasElem.scrollHeight
var canvasContext = canvasElem.getContext('2d');
document.querySelector('#internal-dims').innerHTML = 'Canvas internal width x height: ' +
canvasContext.canvas.width +
' x ' +
canvasContext.canvas.height;
canvasContext.fillStyle = "#00A";
canvasContext.fillText("Distorted", 0, 10);<p id="dom-dims"></p>
<p id="internal-dims"></p>
<canvas style="width: 100%; height: 123px; border: 1px dashed black">widthএবং heightকল সর্বদা 300x150 ফেরত আসবে। ধন্যবাদ
কনটেক্সট অবজেক্ট আপনাকে ক্যানভাস চালিত করতে দেয়; আপনি উদাহরণস্বরূপ আয়তক্ষেত্রগুলি আঁকতে পারেন এবং আরও অনেক কিছু।
আপনি যদি প্রস্থ এবং উচ্চতা পেতে চান, আপনি কেবল স্ট্যান্ডার্ড এইচটিএমএল বৈশিষ্ট্য widthএবং ব্যবহার করতে পারেন height:
var canvas = document.getElementById( 'yourCanvasID' );
var ctx = canvas.getContext( '2d' );
alert( canvas.width );
alert( canvas.height );
এখন 2015 থেকে শুরু হয়ে সমস্ত (মেজর?) ব্রাউজারগুলি ক্যানভাসের অভ্যন্তরীণ আকারটি মঞ্জুরি দেয় c.widthএবং c.heightপেতে পারে বলে মনে হয় তবে:
উত্তর হিসাবে প্রশ্নটি মিসেলিডিং কারণ ক্যানভাসের নীতিগতভাবে 2 টি পৃথক / স্বতন্ত্র আকার রয়েছে।
"এইচটিএমএল" CSS এর প্রস্থ / উচ্চতা এবং এর নিজস্ব (বৈশিষ্ট্য) প্রস্থ / উচ্চতা বলতে দেয়
বিভিন্ন আকারের এই সংক্ষিপ্ত উদাহরণটি দেখুন , যেখানে আমি 300/100 এইচটিএমএল-উপাদানটিতে 200/200 ক্যানভাস রেখেছি
বেশিরভাগ উদাহরণের সাথে (সমস্ত কিছু আমি দেখেছি) কোনও CSS-আকারের সেট নেই, সুতরাং আপনি (অঙ্কন-) ক্যানভাস আকারের প্রস্থ এবং উচ্চতা ইমপ্লিজিট করুন। তবে এটি আবশ্যক নয় এবং মজাদার ফলাফল আনতে পারে, যদি আপনি ভুল আকার গ্রহণ করেন - যেমন। অভ্যন্তরীণ অবস্থানের জন্য সিএসএস প্রস্থ / উচ্চতা।
এইচটিএমএল:
<button onclick="render()">Render</button>
<canvas id="myCanvas" height="100" width="100" style="object-fit:contain;"></canvas>
সিএসএস:
canvas {
width: 400px;
height: 200px;
border: 1px solid red;
display: block;
}
জাভাস্ক্রিপ্ট:
const myCanvas = document.getElementById("myCanvas");
const originalHeight = myCanvas.height;
const originalWidth = myCanvas.width;
render();
function render() {
let dimensions = getObjectFitSize(
true,
myCanvas.clientWidth,
myCanvas.clientHeight,
myCanvas.width,
myCanvas.height
);
myCanvas.width = dimensions.width;
myCanvas.height = dimensions.height;
let ctx = myCanvas.getContext("2d");
let ratio = Math.min(
myCanvas.clientWidth / originalWidth,
myCanvas.clientHeight / originalHeight
);
ctx.scale(ratio, ratio); //adjust this!
ctx.beginPath();
ctx.arc(50, 50, 50, 0, 2 * Math.PI);
ctx.stroke();
}
// adapted from: https://www.npmjs.com/package/intrinsic-scale
function getObjectFitSize(
contains /* true = contain, false = cover */,
containerWidth,
containerHeight,
width,
height
) {
var doRatio = width / height;
var cRatio = containerWidth / containerHeight;
var targetWidth = 0;
var targetHeight = 0;
var test = contains ? doRatio > cRatio : doRatio < cRatio;
if (test) {
targetWidth = containerWidth;
targetHeight = targetWidth / doRatio;
} else {
targetHeight = containerHeight;
targetWidth = targetHeight * doRatio;
}
return {
width: targetWidth,
height: targetHeight,
x: (containerWidth - targetWidth) / 2,
y: (containerHeight - targetHeight) / 2
};
}
মূলত, ক্যানভাস.হাইট / প্রস্থ আপনাকে যে বিটম্যাপটি উপস্থাপন করছে তার আকার নির্ধারণ করে। সিএসএসের উচ্চতা / প্রস্থের পরে বিন্যাসের জায়গাগুলিতে ফিট করার জন্য বিটম্যাপটি স্কেল করে (প্রায়শই এটি এটিকে স্কেল করে দেওয়ার সাথে সাথে ওয়ারপ করে)। এরপরে প্রসঙ্গটি বিভিন্ন আকারে ভেক্টর ক্রিয়াকলাপগুলি ব্যবহার করে অঙ্কনের জন্য এটির স্কেলটি পরিবর্তন করতে পারে।
আমার সমস্যা ছিল কারণ আমার ক্যানভাসটি আইডি ছাড়াই একটি ধারকটির ভিতরে ছিল তাই আমি নীচে এই জ্যাকোয়ারি কোডটি ব্যবহার করেছি
$('.cropArea canvas').width()