2013-02-14 49 views
7

यह मुझे पिछले कुछ दिनों में मार रहा है। मजाक भी नहीं, लेकिन मैं इसे हल करने की कोशिश कर रहा हूं।एफ़िन रूपांतरण मैट्रिक्स ऑफ़सेट

मैं वर्तमान में HTML5 में एक आइसोमेट्रिक प्रोजेक्शन बनाने के लिए एफ़िन रूपांतरण रूपांतरण का उपयोग करने की कोशिश कर रहा हूं। मुझे एक टाइल मिलता है जो एक वर्ग है जो 45 डिग्री घुमाया जाता है (अनिवार्य रूप से स्क्वायर कैनवास पर एक वर्ग हीरा)। मैं एक्स या वाई दिशा में डेल्टा के आधार पर अक्ष के एक को स्केल करता हूं। मैं फिट करने के लिए एक कारक द्वारा धुरी को तोड़ देता हूं। फिर, मैं इसे -45 डिग्री से घूर्णन करके प्रारंभिक रोटेशन को अस्वीकार करता हूं।

वर्तमान में, मेरी affine मैट्रिक्स है:

 // the map has its own x & y values which directions are determined by the red x & y arrows in the picture 
     // pX & pY are the point relative to the canvas origin 
     var pX = x * 22 - y * 22 + 22; 
     var pY = y * 22 + x * 22 - 22 - (center.z * 4); 
     context.setTransform(matrix[0], matrix[1], 
          matrix[2], matrix[3], 

          300, 100); 

     //m_Context.drawImage(image, pX, pY); 
     drawDiamond(pX, pY, true); // draws a 44x44 diamond 

Projection test

Transformed plane

आप देख सकते हैं, बदल मैट्रिक्स हैं:

 // note: the difference in z is about 10 in this example, 
     //  so, xDiff is usually 40 
     var xDiff = 4 * (center.z - map[x+1][y].land.z); 
     var yDiff = 4 * (center.z - map[x][y+1].land.z); 

     var matrix = multiplyAll(
     // Rotation 
     [COS45, SIN45, 
     -SIN45, COS45], 

     // Scale in each respective axis 
     [(44+yDiff)/44, 0, 
     0, (44+xDiff)/44], 

     // Skew each axis 
     [1, -yDiff/(44+yDiff), 
     -xDiff/(44+xDiff), 1], 

     // Negate the rotation 
     [NCOS45, NSIN45, 
     -NSIN45, NCOS45] 
    ); 

तो मैं इसे का उपयोग आकर्षित परिवर्तन के संबंध में खींचा जा रहा है एड एक्स-अक्ष (मुझे लगता है कि "नया" एक्स-अक्ष में yDiff/44 की ढलान है)। मुझे यकीन नहीं है कि आकार कैसे आकर्षित करें ताकि परिवर्तित परिणाम सही स्थिति में हो। pY = x * 22 - (yDiff/10); का उपयोग करने से बिंदु करीब आता है, लेकिन मुझे यादृच्छिक संख्या में प्लग करके इसे बहुत अनुमान लगाया गया।

tl; डॉ:

  • मैं एक परिवर्तन
  • प्रदर्शन किया मैं एक समन्वय जहां एक टाइल होना चाहिए (अगर यह तब्दील नहीं किया गया था)
  • मैं गणना आवश्यक ऑफसेट कैसे है ताकि एक रूपांतरित टाइल का समन्वय वही है जहां यह परिवर्तित होना चाहिए यदि यह परिवर्तित नहीं किया गया था?

पुनश्च: तल पर अजीब हीरे अब के लिए अनदेखा किया जा सकता है क्योंकि वे कर सकते हैं correctly be created एक बार मुझे पता कैसे ऑफसेट गणना करने के लिए।

+0

मुझे समझ में नहीं आता कि आपको क्या चाहिए। अधिकांशतः आपके पास रैखिक परिवर्तन होते हैं जिनमें कोई ऑफ़सेट नहीं होता है। रूपांतरित समन्वय प्रणाली में स्थितियों का पता लगाने के लिए, क्या आप पहले से मौजूद अच्छे ग्रिड का उपयोग नहीं कर सकते? –

+0

@luserdroog ग्रिड केवल उन टाइलों का उपयोग करके बनाया गया है जो परिवर्तित नहीं होते हैं, और इसलिए आप स्थान खोजने के लिए एक अच्छा समीकरण का उपयोग कर सकते हैं। –

+0

कूल ग्राफिक्स के लिए +1 – QED

उत्तर

4

एक affine परिवर्तन मैट्रिक्स ([abcdef]) दो समीकरणों को व्यक्त करता है

x' = ax + cy + e 
y' = bx + dy + f 

तो, आप ऑफसेट स्केलिंग और बढ़ा रही भागों बायपास करने के लिए और उपयोग कर सकते हैं (4x4 रैखिक बदलना 2x3 या 3x3 मैट्रिक्स में एम्बेडेड)।

यह पोस्टस्क्रिप्ट प्रोग्रामिंग में बहुत उपयोग किया जाता है, जहां किसी ऑब्जेक्ट को चित्रित करने के लिए उपयोग किए गए निर्देशांक स्थानीय मूल के सापेक्ष हैं। यदि आप matrices को जोड़ रहे हैं, तो स्केलिंग और स्कूइंग से पहले अनुवाद करें और और f मान अनमोल रहेंगे।

+0

मुझे आपको अपनी बक्षीस देने से 9 घंटे पहले इंतजार करना होगा :( –

+0

कोई समस्या नहीं। खुशी है कि मैं मदद कर सकता हूं। –

+0

समीकरण 'x' = ax + cy + e' और 'y '= bx + dy + f' होना चाहिए , चूंकि मैट्रिक्स है | एसी | | बीडीएफ | | 0 0 | – cleong