2012-05-02 14 views
6

मैं <canvas> (2 डी संदर्भ) का उपयोग करके 3 डी आकार प्रस्तुत करने की कोशिश कर रहा हूं, जिसका अर्थ है कि मुझे कुछ मैन्युअल प्रोजेक्टिव ट्रांसफॉर्मेशन करना है।निकालें -webkit-transform matrix3d ​​मान

यह मुझे सीएसएस से 3 डी रूपांतरण मैट्रिक्स मानों को पुनर्प्राप्त करने में सक्षम होने में बहुत मदद करेगा।

क्या यह किया जा सकता है?

यदि नहीं, तो मैं -वेबिट-परिप्रेक्ष्य-मूल द्वारा किए गए परिवर्तन को कैसे बना सकता हूं? मैंने अकेले परिप्रेक्ष्य के लिए परिवर्तन को समझ लिया है, लेकिन इसका परिप्रेक्ष्य मूल x = y = 0 पर है जो हमेशा मामला नहीं है।

मुझे लगता है कि इस विशेष मामले (कुछ बिंदु एक्स, वाई, जेड में मूल के साथ परिप्रेक्ष्य) बाहर बारी एक सरल एक्स, वाई, जेड अनुवाद तुरंत परिप्रेक्ष्य को बदलने (या दूसरी तरह के आसपास) के बाद हो सकता है लेकिन आदर्श उत्तर वास्तविक 4x4 3 डी मैट्रिक्स निकालने का एक तरीका होगा। अगर मेरे पास मैट्रिक्स है, तो अब मुझे अपने CSS3 तत्वों को बदलने के लिए किए गए चरणों को फिर से पता नहीं करना है ताकि वे उसी ट्रांसफॉर्म को ज्यामिति में लागू कर सकें जिसे मैं <canvas> का उपयोग करना चाहता हूं।

मैंने संदर्भ के लिए यहां (http://www.w3.org/TR/css3-3d-transforms/) देखा लेकिन ऐसा लगता है कि वे अलग-अलग संभावित परिवर्तनों को लागू करते समय मैट्रिक्स को आवंटित वास्तविक मानों का वर्णन नहीं करते हैं। मुझे लगता है कि वहां कुछ स्पेस शीट होनी चाहिए जो इस तरह के विस्तार में जाती है। मुझे लगता है कि यह कहीं भी एक झलक पकड़ रहा है (मैट्रिक्स परिभाषाओं के साथ कई ट्रिगर कार्यों)।

संपादित करें: ब्राउज़र को here में परिवर्तन करने के लिए किए गए चरणों के बारे में अधिक गहन अवलोकन मिला। मेरे प्रश्न का उत्तर नहीं देता है लेकिन यह मुझे अपने अस्थायी लक्ष्य के करीब एक कदम आगे ले जाता है।

उत्तर

4

किसी तत्व के ट्रांसफॉर्म मैट्रिक्स को getComputedStyle के माध्यम से पुनर्प्राप्त किया जा सकता है। यहां एक उदाहरण दिया गया है: http://jsfiddle.net/Kxxwu/

वेबकिटसीएसएसमैट्रिक्स इंटरफ़ेस का उपयोग करने का एक और तरीका होगा। इसका बहुत आसान है, यह मैट्रिक्स मूल्यों और भी कुछ तरीकों के साथ एक वस्तु प्रदान करता है: http://developer.apple.com/library/safari/#documentation/AudioVideo/Reference/WebKitCSSMatrixClassReference/WebKitCSSMatrix/WebKitCSSMatrix.html

बुरा बात यह है कि WebKitCSSMatrix अन्य ब्राउज़रों में लागू नहीं किया गया है ...

देखना चाहते हैं कि आप 3 डी कार्यान्वित कर रहे हैं चाहते हैं कैनवास में बदलना। झुकने के लिए एक अच्छी जगह तीन.जेएस होगी। उन्होंने इसे किया है और आप वहां विभिन्न मैट्रिक्स फ़ंक्शन देख सकते हैं।

गुड लक!

+0

धन्यवाद धन्यवाद, धन्यवाद! –

+0

आपका स्वागत है। यह देखना अच्छा लगेगा कि यह कैसे जाता है। – Mircea

+0

तो ऐसा लगता है कि प्रत्येक तत्व को आवंटित मैट्रिक्स मान उसके और उसके माता-पिता के बीच सापेक्ष परिवर्तन है। मुझे लगता है कि matrices मैन्युअल रूप से गुणा करने के अलावा संचयी परिवर्तन करने का कोई तरीका नहीं है? –

 संबंधित मुद्दे

  • कोई संबंधित समस्या नहीं^_^