एक एसवीजी पथ

के "केंद्र" में लेबल डालें मैं एक svg फ़ाइल के बहुभुज पर एक लेबल खींचने की कोशिश कर रहा हूं। जिस समस्या का मैं सामना कर रहा हूं वह लेबल को रखने के लिए मोटे तौर पर इस बहुभुज का केंद्र ढूंढना है, क्योंकि पथ के निर्देशांक svg प्रारूप में हैं और उन्हें पार्स करने की आवश्यकता है। क्या एक एसवीजी पॉलीगॉन के केंद्र को निर्धारित करने का कोई आसान तरीका है (शायद कोई जावास्क्रिप्ट लाइब्रेरी या स्निपेट इंगित कर सकता है)? मैं svg में हेरफेर करने के लिए राफेल जावास्क्रिप्ट लाइब्रेरी का उपयोग कर रहा हूं, लेकिन यह मानक svg कार्यक्षमता से परे प्रतीत नहीं होता है।एक एसवीजी पथ

स्रोत

2009-11-07 sol

सबसे आसान चीज जो आप कोशिश कर सकते हैं वह बहुभुज में सभी बिंदुओं का औसत ले कर केंद्र की गणना करना है। यह बहुभुज के सबसे अनियमित लेकिन सभी के लिए काम करना चाहिए। मैंने अपने कार्यक्रमों में अच्छे प्रभाव के लिए एक ही एल्गोरिदम का उपयोग किया है।

शुभकामनाएं।

स्रोत

2009-11-07 04:36:09 Randaltor

क्षमा करें, स्पष्ट रूप से मेरे सवाल phrasing नहीं करने के लिए द्वारा svg और यह स्थिति के अंदर एक पाठ टैग डालें। समस्या इस पथ में <पथ डी = "एम 100 100 एल 300 100 एल 200 300 जेड" भर = "लाल" स्ट्रोक = "नीला" स्ट्रोक- पथ के डी-एट्रिब्यूट से निर्देशांक कैसे प्राप्त करें, इस बारे में अधिक समस्या है। चौड़ाई = "3" /> केंद्र की गणना करने के लिए या जावास्क्रिप्ट लाइब्रेरी खोजने के लिए जो मेरे बिना svg spec के अनुसार विशेषता को पार्स कर रहा है। – sol

पहले हल करने वाली पहली समस्या svg को बहुभुज में परिवर्तित करना है। मैं svg पथ को बहुभुज में परिवर्तित करने के लिए एक कोड खोज रहा हूं लेकिन एक नहीं मिला। शायद एसवीजी परियोजनाओं के स्रोत कोड पर खुदाई करना है – ivanceras

आप बहुभुज सुझाव के लिए इसी तरह कुछ कर रही निम्नलिखित सन्निकटन की कोशिश कर सकते एसवीजी डोम तरीकों के आधार पर:

var totalPathLength = pathelm.getTotalLength(); 
var step = totalPathLength/100; 
for(var dist=0; dist < totalPathLength; dist+=step) 
{ 
    var pt = pathelm.getPointAtLength(dist); 
    addToAverage(pt.x, pt.y); 
}

मुझे लगता है कि सबसे सरल दृष्टिकोण पथ तत्व के boundingbox (pathelm के केंद्र का प्रयोग है। getBBox()), यह बहुभुज सुझाव से सरल है।

स्रोत

2009-11-07 11:33:46

+11

पीएस: 'var bbox = p.getBBox(); var x = Math.floor (bbox.x + bbox.width/2.0); var y = Math.floor (bbox.y + bbox.height/2.0); 'मेरे लिए चाल थी, thx। – lwe

धन्यवाद @Iwe! यह बहुत आसान था कि मैं कल्पना कर सकता था :) – Viet

@ आईवे की टिप्पणी एक अलग जवाब होने का हकदार है। यह विभिन्न पेशेवरों और विपक्ष के साथ एक सरल, अलग दृष्टिकोण है। यहां एक वियतनाम और कनाडा देश के आकार ** [http://jsbin.com/orAzoFI/3/edit) का उपयोग करके दोनों का एक जेएसबीआईएन डेमो है ... (http://jsbin.com/orAzoFI/3/edit) कुछ महत्वपूर्ण बिंदुओं और मतभेदों को दिखाता है: न तो विधि ग्रेनटेस केंद्र के अंदर होगा आकार, और यह कि एरिक की विधि केंद्र के पथ के हिस्सों की तरफ खींचती है जो अधिक फ्रैक्चर/जटिल/उच्च रिश्तेदार परिधि है। – user568458

-2

चौड़ाई और hight की गणना

<svg width="447pt" height="559pt" viewBox="0 0 894 1118" version="1.1" xmlns="http://www.w3.org/2000/svg"> 
    ............ 
    ............ 

    <text x="450" y="300" font-family="Verdana" font-size="15" fill="red" > 
     Text To Show 
    </text> 
</svg>

स्रोत

2012-10-18 11:36:16

एक एसवीजी पथ

उत्तर

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