वास्तविक बाएं, घुमावदार div

Question

की शीर्ष स्थिति प्राप्त करें यदि मेरे पास एक div है जो 45 डिग्री घुमाया गया है और इसकी विशेषताएं हैं: बाएं: 0, शीर्ष: 0, चौड़ाई: 100px, ऊंचाई: 100px। क्या मैं divs शीर्ष बाएं कोने की वास्तविक x, y स्थिति प्राप्त कर सकता हूं?

जब div घुमाया जाता है, तो शीर्ष बाएं कोने लगभग -10px, -10px (अनुमान) पर बैठता है। लेकिन मैं एक वेब अनुप्रयोग के लिए वास्तविक शीर्ष बाएं कोनों x, y स्थिति की गणना करने का प्रयास कर रहा हूं।

शायद आप गणितीय सूत्र के बारे में जानते हैं जो शीर्ष बाएं कोनों x, y स्थिति को निर्धारित कर सकता है? या शायद एक जावास्क्रिप्ट विशेषता मुझे दे देंगे? जैसे div.style.actualLeft ;?

Answer 1

यदि यह स्थिर 45 डिग्री है और रोटेशन की उत्पत्ति केंद्र में है तो आप केवल एक बार जो है की गणना करना होगा:

sqrt((width/2)^2+(height/2)^2) 
sqrt(50^2+50^2) // Pythagorean theorem 

जो 70,71067811865475

है

तो उत्पत्ति की तुलना में, x wise यह नकारात्मक 70,7106 है ... और y wise यह 0.

यदि आप इसे गतिशील रूप से घुमाएंगे तो आपको इसे हर समय वॉयला जानना होगा! निहारना!

एक बार दूरी की गणना करें, sqrt(50^2+50^2), फिर घूर्णन द्वारा इसे घुमाएं जिसे आप घन + 135 डिग्री (इसे शीर्ष बाएं कारण) में जोड़ रहे हैं। (90 = सीधे ऊपर, + 45 = 135)

तो एक ही जवाब मैं सिर्फ इतना कहा यह होगा प्राप्त करने के लिए:

var dist=Math.sqrt(50^2+50^2); 
var degtorad=Math.PI/180; 

var x = Math.cos(degtorad * (135+rotation)) * dist; 
var y = Math.sin(degtorad * (135+rotation)) * dist; 

अब एक्स & y मूल के सापेक्ष किया जाएगा। अगर आपको और मदद की ज़रूरत है तो अपने प्रश्न में अधिक विशिष्ट रहें ताकि हम बेहतर जवाब दे सकें, आपकी मदद करने में हमारी सहायता करें।

त्वरित गणना:

rotation=45 
135+45 = 180 

Math.cos(degtorad * 180)) = -1 
Math.sin(degtorad * 180)) = 0; 

x = -1 * dist = -70,71067811865475 
y = 0 * dist = 0 

और जैसे मैं शुरुआत में स्थिर की गणना के लिए कहा देखा यह है, मैं सिर्फ इतना है कि किसी भी क्योंकि/पाप का उपयोग नहीं किया .. लेकिन यह अच्छी तरह से काम करता है। (-75 काम करता है)