Canvas ज़ूमिंग की मूल अवधारणा
Canvas हमेशा अपने वर्तमान मूल बिंदु (origin) से स्केल होता है। डिफ़ॉल्ट मूल बिंदु [0,0] होता है। यदि आप किसी अन्य बिंदु से स्केल करना चाहते हैं, तो आप पहले ctx.translate(desiredX, desiredY) कर सकते हैं। यह canvas के मूल बिंदु को [desiredX, desiredY] पर रीसेट कर देगा।
माउस कर्सर पर ज़ूम करने का सही क्रम
translate() मेथड canvas पर (0,0) की स्थिति को रीमैप करता है। scale() मेथड वर्तमान ड्राइंग को बड़ा या छोटा करता है। माउस ऑफसेट द्वारा canvas context को translate करने के लिए, आपको पहले इसे ज़ूम इन/आउट करने के लिए scale करना होगा, और फिर माउस ऑफसेट के विपरीत द्वारा वापस translate करना होगा।
उदाहरण कोड
ctx.translate(pt.x, pt.y);
ctx.scale(factor, factor);
ctx.translate(-pt.x, -pt.y);
यह क्रम सुनिश्चित करता है कि ज़ूम माउस कर्सर की स्थिति पर केंद्रित रहे, जो एक सहज उपयोगकर्ता अनुभव प्रदान करता है।
