এটি আসলে খুব কঠিন সমস্যা (গণিতগত) এবং আমি প্রায় একই জিনিস নিয়ে কাজ করছি। আমি স্ট্যাকওভারফ্লোতে অনুরূপ প্রশ্ন জিজ্ঞাসা করেছি কিন্তু কোনও প্রতিক্রিয়া পাইনি, তবে ডকটাইপ (এইচটিএমএল / সিএসএসের জন্য স্ট্যাকওভারফ্লো) পোস্ট করেছেন এবং একটি প্রতিক্রিয়া পেয়েছি। এটি দেখুন http://doctype.com/javascript-image-zoom-css3-transforms-calculate-origin- উদাহরণ
আমি এমন একটি jQuery প্লাগইন তৈরির মাঝখানে আছি যা এটি করে (CSS3 ট্রান্সফর্ম ব্যবহার করে গুগল ম্যাপস স্টাইল জুম)। আমি জুম থেকে মাউস কার্সারটি কিছুটা ঠিকঠাকভাবে কাজ করেছি, এখনও গুগল ম্যাপে আপনি যেমন করতে পারেন তেমন ক্যানভাসটিকে ব্যবহারকারীকে কীভাবে টেনে আনতে দেওয়া যায় তা জানার চেষ্টা করছি। আমি যখন এটি কাজ করে চলেছি আমি এখানে কোড পোস্ট করব, তবে মাউস-জুম-টু-পয়েন্ট অংশের জন্য উপরের লিঙ্কটি পরীক্ষা করে দেখুন।
আমি বুঝতে পারি না যে ক্যানভাস প্রসঙ্গে স্কেল এবং অনুবাদ পদ্ধতিগুলি রয়েছে, আপনি CSS3 উদাহরণ ব্যবহার করে একই জিনিস অর্জন করতে পারেন। jQuery ব্যবহার:
$('div.canvasContainer > canvas')
.css('-moz-transform', 'scale(1) translate(0px, 0px)')
.css('-webkit-transform', 'scale(1) translate(0px, 0px)')
.css('-o-transform', 'scale(1) translate(0px, 0px)')
.css('transform', 'scale(1) translate(0px, 0px)');
আপনি CSS3 রূপান্তর-উত্স 0, 0 তে সেট করেছেন তা নিশ্চিত করুন (-মোজ-ট্রান্সফর্ম-উত্স: 0 0)। সিএসএস 3 ট্রান্সফর্ম ব্যবহার করে যে কোনও কিছুতে আপনি জুম বাড়ান, কেবল কনটেনার ডিআইভি ওভারফ্লোতে সেট করা আছে তা নিশ্চিত করুন: পাশ থেকে জুমড প্রান্তগুলি ছড়িয়ে দেওয়া বন্ধ করতে লুকানো hidden
আপনি CSS3 রূপান্তরগুলি ব্যবহার করতে পারেন, বা ক্যানভাসের নিজস্ব স্কেল এবং অনুবাদ পদ্ধতিগুলি আপনার উপর নির্ভর করে, তবে গণনার জন্য উপরের লিঙ্কটি পরীক্ষা করুন।
আপডেট: মেহ! আপনাকে এখানে একটি লিঙ্ক অনুসরণ করার পরিবর্তে আমি এখানে কোড পোস্ট করব:
$(document).ready(function()
{
var scale = 1; // scale of the image
var xLast = 0; // last x location on the screen
var yLast = 0; // last y location on the screen
var xImage = 0; // last x location on the image
var yImage = 0; // last y location on the image
// if mousewheel is moved
$("#mosaicContainer").mousewheel(function(e, delta)
{
// find current location on screen
var xScreen = e.pageX - $(this).offset().left;
var yScreen = e.pageY - $(this).offset().top;
// find current location on the image at the current scale
xImage = xImage + ((xScreen - xLast) / scale);
yImage = yImage + ((yScreen - yLast) / scale);
// determine the new scale
if (delta > 0)
{
scale *= 2;
}
else
{
scale /= 2;
}
scale = scale < 1 ? 1 : (scale > 64 ? 64 : scale);
// determine the location on the screen at the new scale
var xNew = (xScreen - xImage) / scale;
var yNew = (yScreen - yImage) / scale;
// save the current screen location
xLast = xScreen;
yLast = yScreen;
// redraw
$(this).find('div').css('-moz-transform', 'scale(' + scale + ')' + 'translate(' + xNew + 'px, ' + yNew + 'px' + ')')
.css('-moz-transform-origin', xImage + 'px ' + yImage + 'px')
return false;
});
});
ক্যানভাস স্কেল এবং অনুবাদ পদ্ধতিগুলি ব্যবহার করতে আপনাকে অবশ্যই এটি খাপ খাইয়ে নিতে হবে।
আপডেট 2: সবেমাত্র লক্ষ্য করা গেছে আমি অনুবাদ সহ একসাথে রূপান্তর-উত্স ব্যবহার করছি। আমি একটি সংস্করণ যে শুধু ব্যবহারসমূহ স্কেল বাস্তবায়ন এবং তাদের নিজস্ব অনুবাদ, এটি চেক আউট এখানে পরিচালিত করেছি http://www.dominicpettifer.co.uk/Files/Mosaic/MosaicTest.html ডাউনলোড ইমেজ জন্য অপেক্ষা করুন তারপর ব্যবহার আপনার জুম করতে মাউস হুইল, চিত্রটি চারপাশে টেনে নিয়ে প্যানিং সমর্থন করে। এটি CSS3 ট্রান্সফর্ম ব্যবহার করছে তবে আপনার ক্যানভাসের জন্য আপনার একই গণনা ব্যবহার করতে সক্ষম হওয়া উচিত।
