सुलभ भाषा में कैनवास परिवर्तन

शुभ दिन, हभवें! इस लेख में, मैं आपको जावास्क्रिप्ट में परिवर्तन और रोटेशन के बारे में विस्तार से बताऊंगा। ट्रांसफ़ॉर्मेशन मैट्रिक्स, पहली नज़र में, समझ से बाहर है और कई लोग इसका उपयोग बिना एहसास के भी करते हैं कि यह वास्तव में क्या कर रहा है, इंटरनेट से तैयार मूल्यों का उपयोग करके। एमडीसी में , यह विरल रूप से वर्णित है, और अंग्रेजी विकिपीडिया पर जानकारी सार्वजनिक रूप से उपलब्ध है। हम एक साथ यह पता लगाने की कोशिश करेंगे।

अनुवाद करना

अनुवाद सबसे आसान रूपांतरित विधि है। यह केवल निर्दिष्ट मूल्यों द्वारा सभी संबोधित किए गए पिक्सेल को ctx.translate(x,y)



: ctx.translate(x,y)



। हम नीचे और अधिक विस्तार से उसके साथ काम करने की बारीकियों पर विचार करेंगे।

अनुवाद के साथ प्रयोग

स्केल

स्केल, जैसे अनुवाद, x और y को तर्क के रूप में लेता है - वे मान जिनके द्वारा संबंधित अक्ष को गुणा किया जाता है। उदाहरण के लिए, ctx.scale (2,3) के साथ सब कुछ दो बार चौड़ा और तीन गुना ऊंचा खींचा जाएगा। X = -1 को निर्दिष्ट करके हम छवि को बाईं ओर मिरर करेंगे, y = -1 को निर्दिष्ट करके हम इमेज को मिरर करेंगे।

पैमाने के साथ प्रयोग

घुमाएँ

रोटेट एक तर्क के रूप में रेडियन में कोण लेता है जिसके द्वारा अनुवाद विधि द्वारा निर्दिष्ट धुरी बिंदु के चारों ओर छवि को घुमाया जाना चाहिए (डिफ़ॉल्ट 0: 0)। आप एक सरल सूत्र का उपयोग करके डिग्रीधारियों को रेडियन में परिवर्तित कर सकते हैं, जो लिबासनवास में नंबर.डिग्री विधि का आधार है:

 Number.prototype.degree = function () { return this * Math.PI / 180; }; (60).degree() // 60   
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

घूमने के साथ प्रयोग

यदि हम कुछ ऑब्जेक्ट को घुमाना चाहते हैं, उदाहरण के लिए, एक तस्वीर, तो हमें घुमाएगी और अनुवाद के तरीकों के साथ सही ढंग से बातचीत करने की आवश्यकता है, अन्यथा हमें कभी भी सही जगह पर तस्वीर नहीं मिलेगी। रोटेशन के अक्ष के साथ छवि के केंद्र का चयन करने का सबसे आसान तरीका है और इसे निर्देशांक (-उपलब्धता / 2, -height / 2) में खींचना है। उदाहरण के लिए, हम 100: 100 निर्देशांक पर स्थित एक 50x50 छवि को तैनात करना चाहते हैं। हम 125: 125 के समन्वय का अनुवाद करते हैं और समन्वय -25: -25 पर चित्र बनाते हैं। एक विकल्प LibCanvas और रोटेटआईमैज विधि (या निकट भविष्य में ड्राइमेज) का उपयोग करना है, न कि तनाव।

चित्र को घुमाएं

setTransform

 ctx.setTransform(m11, m12, m21, m22, dx, dy);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

आइए हम बदले में विचार करें कि प्रत्येक तर्क किसके लिए जिम्मेदार है।

dx, dy



- अनुवाद विधि को दोहराएं, छवि को उचित मूल्यों द्वारा स्थानांतरित करना।

m11, m22



- स्केल विधि को दोहराएं, जिससे पिक्सल के आकार को बदल दिया जाए।

m12, m21



- अधिक रोचक। प्रत्येक पिक्सेल (x, y) को y * m21 पिक्सेल को दाईं ओर और x * m12 पिक्सेल को नीचे स्थानांतरित किया जाता है, जिसका अर्थ है कि m21 = 1 के साथ, प्रत्येक अगली पंक्ति को पिछले एक के सापेक्ष दाईं ओर 1 पिक्सेल स्थानांतरित किया जाएगा।

सेटट्रांसफॉर्म के साथ प्रयोग करना

ट्रांसफ़ॉर्म विधि ठीक उसी तरह से काम करती है, लेकिन सेटट्रांसफॉर्म के विपरीत यह हर बार पिछले परिवर्तन को कम नहीं करता है, लेकिन इसे ओवरले करता है। इससे क्या प्राप्त किया जा सकता है?

आइसोमेट्रिक मैप

चलो एक साधारण परिवर्तन का उपयोग करके एक शीर्ष दृश्य के साथ एक टाइल 2 डी मानचित्र से एक आइसोमेट्रिक बनाते हैं। सबसे सरल सममितीय प्रक्षेपण आकृति एक समचतुर्भुज है जिसमें क्षैतिज विकर्ण ऊर्ध्वाधर से दो गुना बड़ा है (यह दो बार जितना अधिक व्यापक है)। इसे तीन चरणों में किया जा सकता है।



हम इसे m21 = 1 के साथ दाईं ओर स्थानांतरित करते हैं, इसे m12 = -0.5 के साथ ऊपर उठाते हैं और इसे m22 = 0.5 के साथ धक्का देते हैं (आप इसे सैंडबॉक्स में चरणों में दोहरा सकते हैं)।

लेकिन यह क्षैतिज से 26.565 ° के कोण के साथ एक सममितीय दृश्य होगा। यदि हम 30 ° के कोण के साथ एक वास्तविक सममितीय प्रक्षेपण चाहते हैं - हमें इसे X चौड़ाई के साथ सेल चौड़ाई को बदलते हुए, चौड़ाई में थोड़ा समतल करना होगा, जो निम्न विधि का उपयोग करके गणना करना आसान है:



हम देखते हैं कि कोशिका बिंदु O पर केंद्र के साथ ABCD है। कोण BAO वह कोण है जिसे 26.6 से बनाना पड़ता है। अब AO = BD, अर्थात समद्विबाहु त्रिभुज BAD की ऊँचाई इसके आधार के बराबर है। हमें इस त्रिभुज को समबाहु बनाने की आवश्यकता है (ताकि बीएडी कोण 60 डिग्री हो जाए), अर्थात कुछ कारक द्वारा ऊंचाई कम करें। मान लीजिए AO = BD = 1 तोता। तब एओ को तोता के वर्गर्ट (एबी ² -बीओ ² ) = वर्गर्ट (1-0.25) = 0.866 के बराबर होना चाहिए। यह वह गुणांक है जिसका उपयोग हम अपने मैट्रिक्स में करते हैं:

 ctx.setTransform(0.866, -0.5, 0.866, 0.5, 0, 0)
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

हम देखते हैं कि हमें नक्शा कैसे मिला

मुझे उम्मीद है कि सब कुछ स्पष्ट रूप से वर्णित है। प्रश्न पूछें, सुझाव दें, साथ में हम विषय को फिर से भर देंगे।