राफेल जेएस और एसवीजी का उपयोग कर एक सेक्टर पथ का आकार बदलने का अधिक शानदार तरीका?

Question

मैं छोटे svg अनुभव के साथ पहली बार Raphaël का उपयोग कर रहा हूं और मुझे किसी ऐसे व्यक्ति की आवश्यकता है जो मेरी मदद करने के लिए इन दोनों के साथ वास्तव में जानकार है।

मैंने गतिशील क्षेत्रों के साथ एक पाई चार्ट बनाया है। दौर बटन पर खींचकर क्षेत्रों का आकार बदल सकता है। this fiddle देखें। मैंने केवल क्रोम और सफारी में परीक्षण किया है जो केवल आवश्यक ब्राउज़र हैं।

पाई चार्ट अभी तक पूरा नहीं हुआ है। सेक्टर ओवरलैप कर सकते हैं। कृपया इसे अभी अनदेखा करें।

मैं, समस्याओं के साथ सामना करना पड़ा जब एक क्षेत्र के शुरू कोण समाप्त होने के कोण से अधिक था। यह वह मामला है जब समापन कोण 0/360 डिग्री चिह्न से पहले चला जाता है। इसे हल करने के लिए मैंने पथ का उपयोग किया- रोटेशन -parameter। मैं क्षेत्र आगे बढ़े, जबकि, वापस कोण चलती जब तक अंत कोण 360 पर है आप इस समारोह में बेला में देख सकते हैं:

function sector_update(cx, cy, r, startAngle, endAngle, sec) { 
    var x1 = cx + r * Math.cos(-startAngle * rad), 
     x2 = cx + r * Math.cos(-endAngle * rad), 
     y1 = cy + r * Math.sin(-startAngle * rad), 
     y2 = cy + r * Math.sin(-endAngle * rad); 


    var rotation = 0; 

    // This is the part that I have the feeling could be improved. 
    // Remove the entire if-clause and let "rotation" equal 0 to see what happens 
    if (startAngle > endAngle) { 
     rotation = endAngle; 
     startAngle = startAngle - endAngle; 
     endAngle = 360; 
    } 

    sec.attr('path', ["M", cx, cy, "L", x1, y1, "A", r, r, rotation, 
    +(endAngle - startAngle > 180), 0, x2, y2, "z"]); 
} 

हालांकि यह अच्छी तरह से काम करता है, मैं थोड़ा उलझन में हूँ। क्या इसे पथ के घूर्णन के बिना हल किया जा सकता है? मैं किसी भी मदद या पॉइंटर्स की सराहना करता हूं।

Answer 1

Can this be solved without the rotation of the path?

उत्तर: हाँ, यह कर सकते हैं। आपको पथ के घूर्णन को बिल्कुल बदलना नहीं है। जब तक मैं कुछ याद कर रहा हूँ, निम्नलिखित कोड क्या आप बेला में है के रूप में ही काम करने के लिए लगता है:

function sector_update(cx, cy, r, startAngle, endAngle, sec) { 
    var x1 = cx + r * Math.cos(-startAngle * rad), 
     x2 = cx + r * Math.cos(-endAngle * rad), 
     y1 = cy + r * Math.sin(-startAngle * rad), 
     y2 = cy + r * Math.sin(-endAngle * rad); 

    //notice there is no "roation" variable 
    if (startAngle > endAngle) { 
     startAngle -= endAngle; 
     endAngle = 360; 
    } 

    sec.attr('path', ["M", cx, cy, "L", x1, y1, "A", r, r, 0, 
    +(endAngle - startAngle > 180), 0, x2, y2, "z"]); 
} 

स्पष्टीकरण: मेरी स्पष्टीकरण के लिए, मैं W3 Spec और Raphael Reference Library में एसवीजी शब्दावली का उपयोग करेगा । यही है, जबकि आप cx, cy, और rotation का उपयोग करते हैं, तो इन क्रमशः rx, ry, और x-axis-rotation का उपयोग करते हैं।

संक्षेप में, जब भी rx के बराबर होती है ry, तो x-axis-rotation अर्थहीन है।

this SVG देखें। अपने ब्राउज़र के विकास उपकरण का उपयोग करें, या अपने कंप्यूटर पर एसवीजी को सहेजें और इसे संपादित करने के लिए फ़ाइल संपादक का उपयोग करें। विशेष रूप से, अंतिम path तत्व देखें, जिसमें इसमें चार arcs हैं। प्रत्येक चाप पर x-axis-rotation मान को संशोधित करने का प्रयास करें। आप देखेंगे कि पहला आर्क (जहां rx और ry दोनों "25" हैं) जब आप x-axis-rotation मान अपडेट करते हैं तो कभी भी परिवर्तन नहीं होता है।

क्यों? ऐसा इसलिए है क्योंकि आपके पास गोलाकार चाप है। कोई फर्क नहीं पड़ता कि आप एक सर्कल घुमाते हैं, यह अभी भी एक ही सर्कल होगा। उदाहरण के लिए, आप के सामने एक ग्लास रखें ताकि ग्लास जमीन पर क्षैतिज हो, और आप सीधे गिलास को देख रहे हों। अब अपने कलाई के साथ कांच घुमाएं/मोड़ें। क्या आप देखते हैं कि आपके द्वारा देखे जाने वाले गोलाकार आकार को उसी परिपत्र आकार में कैसे रखा जाता है? अब सामान्य रूप से मेज पर कांच सेट करें (इसलिए यह लंबवत है और एक तरल पकड़ सकता है)। अब गिलास पर टिपो। आप स्पष्ट परिप्रेक्ष्य परिवर्तन देख सकते हैं; यह इंगित कर रहा था, लेकिन अब यह फ्लैट बिछा रहा है। यही है x-axis-rotation करता है।

शायद एक बेहतर उदाहरण सिर्फ ऊपर उल्लिखित एसवीजी फ़ाइल के साथ चारों ओर खेलने के लिए है।अंतिम path तत्व में arcs पर x-axis-rotation के साथ खेलो। आप arcs घूर्णन के आसपास घूमते देखेंगे। यही है x-axis-rotation करता है।

अपने कोड पर वापस क्योंकि आप गोल वस्तुओं के साथ ही काम कर रहे हैं, x-axis-rotation अंतिम आउटपुट पर कोई अंतर नहीं पड़ेगा। जब तक आप केवल सर्कुलर ऑब्जेक्ट्स से निपटने के लिए हैं, तो आप किसी भी चिंता के बिना शून्य के लिए हार्ड-कोड कर सकते हैं। आपको बस इतना करना है कि कोणों को संशोधित करें, जिन्हें आपने सही तरीके से किया था।

प्रदर्शन: मैं दोनों के साथ और x-axis-rotation चर को संशोधित करने के बिना अपने sector_update समारोह समय के लिए जावास्क्रिप्ट का उपयोग करने की कोशिश की। परिणाम? मैंने प्रदर्शन में कोई फर्क नहीं देखा। खर्च किए गए अधिकांश समय वास्तव में एसवीजी को चित्रित करते हैं, न कि गणित पर जो मूल्यों को निर्धारित करता है। असल में, आप वास्तव में जावास्क्रिप्ट में कर रहे हैं path तत्व में मान सेट करने के लिए कोड अपडेट कर रहा है। उस समय, ब्राउज़र वास्तव में एसवीजी ऑब्जेक्ट को आकर्षित करने के लिए इसके प्रतिपादन इंजन के साथ ले जाता है। मुझे लगता है कि यह प्रति ब्राउज़र समस्या है, क्योंकि प्रत्येक ब्राउज़र के पास अलग-अलग प्रतिपादन प्रदर्शन होता है। लेकिन x-axis-rotation मूल्य का कोई प्रभाव नहीं है या नहीं, मेरा अनुमान नहीं है। यदि एक प्रदर्शन हिट है (क्योंकि ब्राउज़र को अतिरिक्त फ़्लोटिंग-पॉइंट ऑपरेशन करना पड़ सकता है), तो यह बहुत ही अविश्वसनीय रूप से मूक है क्योंकि उस समय के भारी बहुमत वस्तु को चित्रित करने में व्यतीत होता है, इसकी कीमतों की गणना नहीं करता है। तो मैं इसके बारे में चिंता न करने के लिए कहूंगा।

मुझे उम्मीद है कि मदद करता है, अगर मुझे कुछ याद आया या कुछ अच्छी तरह से समझा नहीं गया तो मुझे बताएं।