javascript - Calculate SVG Arc between two points -


वांछित स्थिति

मेरे पास निर्देशांक के साथ अंक X और ए , ए ' मिल गया है:
एक्स [x, y] (प्रारंभिक बिंदु है)
ए [ए, बी] , ए '[ए', बी '] < / कोड>, आदि (समापन बिंदु हैं)

मुझे भी पता है कोण XCA , XCA ', आदि।

मुझे आर्क पर गणना करने के लिए फार्मूला नहीं मिल सकता है, चित्र पर वाले लोगों के समान है, जो दूसरे ए-पॉइंट के साथ बिंदु X को कनेक्ट करता है।

मैंने त्रिज्या एक्स की गणना करने की कोशिश की और त्रिज्या वाई का उपयोग करके abs (x - ए) और abs (y - b) । यह केवल अच्छा लग रहा था जब 90, 180, 270 जैसे कोण का उपयोग किया जाता है।

फिर मैंने अंतराल के त्रिज्या की गणना करने की कोशिश की जो कि X और A में कटौती करता है।

PS: ऊपर की छवि कुछ वांछित स्थिति दिखाती है (मैंने खींचा है यह मुफ्त हाथ का उपयोग कर) ग्रे लाइनों को सिर्फ स्थिति के लिए उपयोग किया जाता है।

संपादित करें ========================== < / P>

मुझे पता चला है कि खुदा चक्र विकल्प काफी अच्छी तरह से काम करता है, लेकिन मुझे पता नहीं है कि जब बड़े-आर्क-फ़्लैग का प्रयोग करें 1 और जब 0 ( स्वीप-फ्लैग के साथ वही समस्या)

यह मुझे लगता है जैसे द्विघात बीज़ियर घटता सबसे आसान समाधान होगा यहां एक उदाहरण है: 

  & lt;? Xml संस्करण = "1.0"? & Gt; & Lt; svg xmlns = "http://www.w3.org/2000/svg" xmlns: xlink = "http://www.w3.org/1999/xlink" दृश्य बॉक्स = "0 400 400" चौड़ाई = " 400 "ऊंचाई =" 400 "संस्करण =" 1.0 "& gt; & Lt; g रूपांतरण = "अनुवाद (200 200)" & gt; & Lt; सर्कल cx = "0" cy = "0" r = "150" स्ट्रोक = "# 000" fill = "none" / & gt; & Lt; पथ d = "M0, -150 Q0,0 106.066, -106.066" भरण = "कोई नहीं" स्ट्रोक = "लाल" स्ट्रोक-चौड़ाई = "3" / & gt; & Lt; पथ d = "M0, -150 Q0,0 106.066,106.066" भरण = "कोई नहीं" स्ट्रोक = "लाल" स्ट्रोक-चौड़ाई = "3" / & gt; & Lt; पथ d = "M0, -150 Q0,0 -106.066,106.066" भरण = "कोई नहीं" स्ट्रोक = "लाल" स्ट्रोक-चौड़ाई = "3" / & gt; & Lt; पथ d = "M0, -150 Q0,0 -106.066, -106.066" भरण = "कोई नहीं" स्ट्रोक = "लाल" स्ट्रोक-चौड़ाई = "3" / & gt; & Lt; / छ & gt; & Lt; / svg & gt;

वक्र को पथ विशेषता एम x 0 , y <द्वारा परिभाषित किया जाता है > 0 क्यू x 1 , y <उप> 1 x <उप > 2 , y 2 जहां x 0 , Y 0 प्रारंभ बिंदु (एक्स) है, x 1 , y 1 नियंत्रण बिंदु है (अर्थात, वृत्त का केंद्र, सी), और x 2 , y 2 अंत बिंदु ए है।

यदि आप वक्रता पर अधिक नियंत्रण चाहते हैं, तो इसके बजाय क्यूबिक बेज़िएर घटता का उपयोग करें । इन दो नियंत्रण बिंदु हैं, जो एक्स और सी के बीच और सी और ए के बीच की सीधी रेखाओं पर रखा जाना चाहिए। यदि आप उन्हें सी के करीब रखते हैं, तो आपको एक कड़े वक्र मिलेगा।

< / P>


Comments

Post a Comment