ক্যানভাসে নির্দিষ্ট বিন্দুকে কেন্দ্র করে স্কেলিং
ডিফল্টভাবে HTML5 ক্যানভাস আপনার ওরিজিন (০,০) থেকে স্কেল হয়। যদি আপনি অন্য কোনো বিন্দু (যেমন মাউস কার্সারের অবস্থান) থেকে জুম বা স্কেল করতে চান, তবে নিচের পদ্ধতি অনুসরণ করুন:
লজিক
translate(desiredX, desiredY)দিয়ে ক্যানভাসের ওরিজিন আপনার ইচ্ছিত বিন্দুতে সরান।scale(factor, factor)দিয়ে জুম ইন বা আউট করুন।translate(-desiredX, -desiredY)দিয়ে ওরিজিনটি আগের অবস্থানে ফিরিয়ে আনুন (অথবা পরবর্তী ড্রইংয়ের জন্য সামঞ্জস্য করুন)।
কোড উদাহরণ
// pt.x, pt.y হলো মাউস কার্সারের কোঅর্ডিনেট // factor হলো জুম ফ্যাক্টর (১.০ = সাধারণ আকার, >১ = জুম ইন, <১ = জুম আউট) ctx.translate(pt.x, pt.y); ctx.scale(factor, factor); ctx.translate(-pt.x, -pt.y);
এই ক्रमটি মেনে চললে ক্যানভাসের কন্টেন্ট মাউস কার্সারের অবস্থানকে কেন্দ্র রেখে জুম হবে, যা ব্যবহারকারীর অভিজ্ঞতাকে আরও স্বाभাবিক করে তোলে।
