एचटीएमएल 5 कैनवास:

Question

घुमाए जाने पर एक्स, वाई पॉइंट की गणना करना, मैं एक HTML5 कैनवास ऐप विकसित कर रहा हूं और इसमें एक एक्सएमएल फ़ाइल पढ़ना शामिल है जो तीर, आयतों और अन्य आकारों की स्थिति का वर्णन करता है जिन्हें मुझे कैनवास पर आकर्षित करने की आवश्यकता है।

एक्सएमएल लेआउट का उदाहरण:

<arrow left="10" top="20" width="100" height="200" rotation="-40" background-color="red"/> 
<rect left="10" top="20" width="100" height="200" rotation="300" background-color="red"/> 

वस्तु घुमाया जाता है तो यह एक बिंदु की स्थिति जब एक अन्य बिंदु के चारों ओर घुमाया (बाएं (पी रोटेशन के बाद वस्तु की नई स्थिति कहा जाता है) की गणना करना शामिल है, ऊपर)। मैं इस बिंदु पी की गणना करने के लिए उपयोग कर सकते हैं एक सामान्य समारोह/सूत्र के साथ आने का प्रयास कर रहा हूं लेकिन मेरे गणित थोड़ा कमजोर & मैं पहचान नहीं कर सकता कि मैं किस आर्क/टेंगेंट फॉर्मूला का उपयोग करने के लिए उपयोग कर रहा हूं।

क्या आप मुझे ऐसे फॉर्मूला के साथ आने में सहायता कर सकते हैं जिसका उपयोग मैं बिंदु पी की गणना घूर्णन के लिए कर सकता हूं जो सकारात्मक & नकारात्मक दोनों हो सकता है?

ऊपर के उदाहरण में: बिंदु (14,446) छोड़ दिया है, शीर्ष बिंदु & बिंदु (226,496) मध्य वस्तु की बात है जब घुमाया नहीं तो बिंदु = (बाएं + चौड़ाई/2 , शीर्ष + ऊंचाई/2) और घुमाए जाने पर नीली बिंदु मध्य बिंदु है। मुझे पता है कि अंक (14,446) & (226,496) के बीच की रेखा को कैसे मापें, लेकिन नीली बिंदु x, y स्थिति की गणना कैसे करें - बीटीडब्ल्यू: इस पंक्ति की लंबाई नीली बिंदु & के बीच की रेखा के समान है (14,446)

len = sqrt((496-446)^2 + (226-14)^2); 
    = 227.56; 

Answer 1

यह काफी आसान है। समन्वय प्रणाली कोण के लिए थीटा निर्देशांक (एक्स, वाई) की उत्पत्ति के आसपास रोटेशन में के रूप में

x' = x * cos(Theta) - y * sin(Theta); 
y' = x * sin(Theta) + y * cos(Theta); 

तो बदल रहे हैं, वह सब आप की जरूरत अंक है कि आप से एक के लिए रोटेशन की बात अनुवाद करने के लिए है। आइए इसे अधिक सरल तरीके से लिखें: (x1, y1) = (14,446) और (x2, y2) = (226,496)। आप "घुमाएं" (x2, y2) के आसपास (x1, y1) की कोशिश कर रहे हैं। मूल (x1, y1) पर मूल के साथ एक नई समन्वय प्रणाली में (dx2, dy2) की गणना करें।

(dx2,dy2) = (x2-x1,y2-y1); 

अब बारी बारी से (सकारात्मक कोण वामावर्त हैं):

dx2' = dx2 * cos(165 Degrees) - dy2 * sin(165 Degrees); 
dy2' = dx2 * sin(165 Degrees) + dy2 * cos(165 Degrees); 

अंतिम चरण (x1, y1) मूल के पीछे मूल से बिंदु के निर्देशांक अनुवाद करने के लिए है (0,0);

x2' = dx2' + x1; 
y2' = dy2' + y1; 

पुनश्च: यह भी पढ़ा इस :) http://en.wikipedia.org/wiki/Rotation_matrix और भूल नहीं है कि विभिन्न प्रोग्रामिंग भाषाओं में सबसे त्रिकोणमितीय कार्यों रेडियंस के साथ ज्यादातर सौदा ..

पी पी एस: और मुझे आशा है कि मैं तुम्हें डर नहीं था - पूछना अगर आपके पास कोई प्रश्न है।

Answer 2

मैं अपने मामले में लगता है कि आप समीकरणों के निम्नलिखित प्रणाली के साथ इस रोटेशन स्थिति की गणना करने के लिए सक्षम होना चाहिए:

x = R * Math.cos(angle - angle0); 
y = R * Math.sin(angle - angle0); 
angle = deg * Math.PI/180; 
angle0 = Math.atan(y0/x0); 

R yor त्रिज्या वेक्टर की लंबाई (len अपने उदाहरण में)।
deg डिग्री में कोण जो आप घूर्णन कर रहे हैं, i।जी 120 °
x और y अंतिम स्थिति के निर्देशांक जो आप ढूंढ रहे हैं।
angle वास्तविक रोटेशन कोण (रेड में, grads नहीं) है।
angle0 प्रारंभिक कोण बिंदु एक्स-अक्ष से संबंधित रूप से घूर्णन किया गया था। हमें Math.atan का उपयोग करके इसे सटीक करने की आवश्यकता है।

परीक्षण नहीं किया गया है। कोशिश करके देखें। लेकिन विचार इसी तरह है - त्रिकोणमितीय कार्यों का उपयोग करें।

Answer 3

निर्देशांक गणना का एक उदाहरण: Dice roll