तो चलो एक 300x300 कैनवास पर एक ग्रिड आकर्षित करते हैं:
http://jsfiddle.net/simonsarris/4uaZy/
यह करना होगा। कुछ खास नहीं। एक लाल रेखा इंगित करती है कि मूल कहां से चल रहा है (0,0) और बहुत दूर तक फैला हुआ है, इसलिए जब हम इसका अनुवाद करते हैं तो हम कुछ देखेंगे। यहां मूल शीर्ष बाएं कोने है, जहां लाल रेखाएं (0,0) पर मिलती हैं।
ग्रिड खींचने से पहले नीचे दिए गए सभी अनुवाद होते हैं, इसलिए हम ग्रिड को ले जायेंगे। यह आपको यह देखने देता है कि ऑर्गीन के साथ क्या हो रहा है।
http://jsfiddle.net/simonsarris/4uaZy/1/
तो हम मूल है, जो अनुवाद किया है जहां लाल X है:
तो 100,100 से कैनवास का अनुवाद है, यह नीचे जा + सही करने देता है केन्द्रित। उत्पत्ति अब 100,100 पर है।
अब हम अनुवाद करेंगे और फिर स्केल करेंगे। ध्यान दें कि मूल छवि के समान स्थान एक ही स्थान पर है, सबकुछ केवल दोगुना बड़ा है।
http://jsfiddle.net/simonsarris/4uaZy/2/
बूम। ऑर्गिन अभी भी 100,100 पर है। हालांकि सब कुछ 2 से भरा हुआ है। उत्पत्ति बदल गई, तो सबकुछ जगह पर फंस गया।
अब रिवर्स में उनकी ओर देखो देता है।इस बार हम पहले पैमाने, तो सब कुछ शुरू से ही मोटा है:
http://jsfiddle.net/simonsarris/4uaZy/3/
सब कुछ 2. से फूला हुआ है मूल 0,0 पर है, इसके प्रारंभिक बिंदु।
अब हम एक पैमाने और फिर अनुवाद करते हैं।
http://jsfiddle.net/simonsarris/4uaZy/4/
हम 100,100 अभी भी द्वारा अनुवाद कर रहे हैं, लेकिन मूल वास्तविक पिक्सल में 200,200 से ले जाया गया है। पिछले दो छवियों की तुलना करें।
ऐसा इसलिए है क्योंकि स्केल के बाद होने वाली प्रत्येक चीज को स्केल किया जाना चाहिए, जिसमें अतिरिक्त परिवर्तन शामिल हैं। तो एक छोटा कैनवास पर (100,100) द्वारा बदलने यह 200 से चलती की ओर जाता है, यहाँ याद करने के लिए 200.
टेकअवे बात परिवर्तन को बदलने प्रभावित करता है कि कैसे चीजों को फिर से तैयार कर रहे हैं (या बदल!) है । आप x2 पैमाने पर, और उसके बाद का अनुवाद करते हैं, तो अनुवाद x2 हो जाएगा
आप देखना चाहते हैं, तो गणितीय, क्या हर कदम पर हो रहा है मैं तुम्हें यहाँ कोड पर एक नज़र लेने के लिए प्रोत्साहित करते हैं:
https://github.com/simonsarris/Canvas-tutorials/blob/master/transform.js
यह कैनवास द्वारा की गई संपूर्ण परिवर्तन प्रक्रिया की नकल करता है और आपको यह देखने देता है कि बाद में आने वाले परिवर्तनों को कैसे संशोधित किया जाता है।
उत्कृष्ट स्पष्टीकरण। अब इतना स्पष्ट लगता है :) – DougN
ठीक है, कुछ अभी भी समझ में नहीं आता है। इसे देखें: http://jsfiddle.net/sdJ7v/1/ परीक्षण और त्रुटि ने मुझे हरे रंग के अंदर नीले वृत्त को केंद्रित करने में मदद की। लेकिन निर्देशांक दिए गए, कि ऑफसेट समझ में नहीं आता है। सुनिश्चित नहीं है कि ट्रांसफॉर्म कैसे लागू किया जा रहा है ... – DougN
कृपया मेरी टिप्पणियां यहां देखें: http://jsfiddle.net/simonsarris/sdJ7v/2/ क्या यह समझ में आता है? –