मैं जावास्क्रिप्ट का उपयोग किए बिना एसवीजी में ऑफसेट पथ प्रभाव को कैसे कार्यान्वित कर सकता हूं या फिल्टर मिटा सकता/मिटा सकता हूं?

Question

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

मैंने एडोब इलस्ट्रेटर के ऑफसेट पथ प्रभाव का कई बार उपयोग किया है और इसके साथ मैं आसानी से ग्राफिकल ऑब्जेक्ट्स की प्रतियां बना सकता हूं जो मूल वस्तु को प्रभावित किए बिना पतले या मोटे हो जाते हैं, जो कि प्रोग्राम द्वारा समर्थित लगभग जो भी हो सकता है।

मैंने एसवीजी में काम करने के लिए समान कार्यक्षमता प्राप्त करने का प्रयास किया है, लेकिन सफलता के बिना।

मैं कोशिश की है निम्नलिखित:
- फैलने और फिल्टर खराब है, लेकिन संतोषजनक नहीं परिणाम (please see the image here)
साथ - सर्वर साइड पायथन के सुडौल पुस्तकालय, लेकिन इस समाधान बहुत धीमी है और इनसेट या शुरू ही करने की अनुमति देता बुनियादी बहुभुज (description here)
- जावास्क्रिप्ट पुस्तकालय/कोड/समारोह है, जो ग्राफिकल तत्वों के पथ डेटा बदल सकता है खोजने के लिए है, लेकिन जावास्क्रिप्ट के लिए कुछ भी नहीं मिला

तो वहाँ इस तरह ऑफसेट पथ प्रभाव लागू करने के लिए किसी भी सार्थक तरीके और कैसे?

Answer 1

यह "अपने स्वयं के प्रश्न का उत्तर दें - share your knowledge, Q&A-style" -स्टाइल उत्तर, लेकिन यदि आपके पास कुछ बेहतर उत्तर है, तो कृपया अपने कीबोर्ड का स्वतंत्र रूप से उपयोग करें।

मैंने केवल कुछ दिनों का उपयोग किया है, इसलिए कृपया मुझे अंतराल पर न डालें। मुझे इस मुद्दे पर एक दिलचस्प workaround idea मिला, जो चर-चौड़ाई स्ट्रोक और मास्क पर आधारित है।

लेकिन चलो अपने (या मेरे) पहले विचार से शुरू करते हैं। जब हम (पतली) एसवीजी में ग्राफिकल वस्तुओं को खत्म करने जा रहे हैं, स्पष्ट पहला विचार फिल्टर को खत्म उपयोग करने के लिए है:

uses pixel data (the rasterized path) परिणाम लेकिन क्योंकि फिल्टर को खत्म (और साथ ही फैलने) सभी मामलों में देख अच्छा नहीं है। असल में मैंने वेक्टर ऑब्जेक्ट्स को फ़िल्टर करने के लिए उपयोग किए जाने पर एक अच्छा दिखने वाला ईरोड कभी नहीं देखा है। टोपी और मुंह देखें:

चौड़ा करना फिल्टर इसी तरह की समस्याओं है (नाक अच्छा नहीं है और बेसबॉल टोपी अव्यवस्थित है और कुछ अन्य विसंगतियों):

सभी उपयोगकर्ताओं एडोब इलस्ट्रेटर के अच्छे पथ प्रभावों को जानते हैं, जिनका उपयोग विभिन्न पथ संचालन को आकार (ऑब्जेक्ट्स) पर लागू करने के लिए किया जा सकता है। ये प्रभाव मूल पथ डेटा को नहीं बदलते हैं, वे केवल ऑब्जेक्ट की एक संशोधित प्रति बनाते हैं। सबसे उपयोगी उपयोग में से एक Offset Path Effect है, जिसका उपयोग चयनित ऑब्जेक्ट से निर्दिष्ट दूरी (या कुछ समान) से सेट करने के लिए किया जा सकता है। एसवीजी: एस erode और dilate फिल्टर इलस्ट्रेटर के ऑफसेट पथ प्रभाव के साथ समानताएं हैं, लेकिन गुणवत्ता एक वेक्टर ऑपरेशन (बनाम बिटमैप) के रूप में उच्च है।

इसके वर्तमान स्थिति में एसवीजी प्रारूप में इलस्ट्रेटर-ऑफसेट पथ के लिए समर्थन की कमी नहीं है, लेकिन here के रूप में चर-चौड़ाई स्ट्रोक और मास्क का उपयोग करके समान कार्यक्षमता प्राप्त करना संभव है।

चलो एसवीजी मास्क की दुनिया में गोता लगाएँ। स्ट्रोक चौड़ाई को बढ़ाकर पतला (या प्रारंभ पथ या मोटा होना) संभव है, लेकिन मिर (उदाहरण के लिए पथ या पतला) इरोड (या इन्सेट पथ या पतला) कुछ और चाहिए। एसवीजी में, किसी भी ग्राफिक्स ऑब्जेक्ट या 'जी' तत्व को पृष्ठभूमि (W3C SVG 1.1 Recommendation) में वर्तमान ऑब्जेक्ट को कंपोजिट करने के लिए अल्फा मास्क के रूप में उपयोग किया जा सकता है।

उपर्युक्त मतलब है कि न केवल वस्तु का भरना मास्क के रूप में उपयोग किया जा सकता है, बल्कि एक स्ट्रोक भी। और मास्क के रूप में उपयोग किए जाने वाले पथ के स्ट्रोक की चौड़ाई को समायोजित करने के लिए, हम नियंत्रित कर सकते हैं कि वर्तमान ऑब्जेक्ट (जिसमें मास्क विशेषता का उपयोग करके मास्क लागू किया जाता है) को पर मुखौटा किया जाता है।

चलो मास्क का उपयोग करने का एक उदाहरण प्राप्त करें। पहले हम एसवीजी में एक मार्ग को परिभाषित: रों defs तत्व:

<defs> 
<path id="head_path" d="M133.833,139.777c1 ...clip... 139.777z"/> 
</defs> 

जब हम defs तत्व में एक मार्ग को परिभाषित है, यह दस्तावेज़ के अन्य भागों में एक ही डेटा को दोहराने के लिए की आवश्यकता समाप्त। पथ की आईडी विशेषता दस्तावेज़ के कुछ बिंदुओं से पथ को संदर्भित करने के लिए उपयोग की जाती है।

अब हम नकाब में इस पथ डेटा का उपयोग कर सकते हैं: 'पथ' तत्व को

<defs> 
... 
<mask id="myMask" maskUnits="userSpaceOnUse"> 
<use xlink:href="#head_path" fill="#FFFFFF" stroke="#000000" 
stroke-width="18" stroke-linecap="round" stroke-linejoin="round"/> 
</mask> 
... 
</defs> 

'उपयोग' तत्व संदर्भ, जिसका आईडी 'head_path' है और पता चलता है कि चित्रमय सामग्री (इस मामले में इस मुखौटा पर 'head_path' तत्व का केवल पथ डेटा शामिल है। उपरोक्त 'उपयोग' तत्व पर परिभाषित स्ट्रोक-चौड़ाई ऑफसेट (ईरोड) प्रभाव की मात्रा होगी। इस राशि को तत्व के बाहर मुखौटा बनाया गया है, जिसे हम आगे आकर्षित करने जा रहे हैं।

... 
</defs> 
<use x="5" y="5" xlink:href="#head_path" fill="#4477FF" stroke="black" 
stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> 

यह निम्न आकार का उत्पादन:

अब परीक्षण, हम क्या कर सकते हैं

ठीक है, के पहले देखें कि यह कैसे सुंदर है मास्किंग बिना 'सिर' आकर्षित करते हैं मास्क का उपयोग करके प्राप्त करें:

... 
</defs> 
<use x="5" y="5" xlink:href="#head_path" fill="#22EE22" stroke="black" 
stroke-width="21" stroke-linecap="round" stroke-linejoin="round" 
mask="url(#myMask)"/> 

ऊपर 'उपयोग' तत्व I एक मास्क के रूप में 'myMask' और ग्राफिकल सामग्री के रूप में 'head_path' का उपयोग करने का निर्देश दिया है। मुखौटा प्रभाव 'उपयोग' तत्व को लागू किया जाता है और निम्नलिखित आकार तैयार की है:

:

हम दोनों एक के ऊपर एक स्टैक, तो हम नकाबपोश सिर करने के लिए मूल सिर तुलना कर सकते हैं

बिलकुल भी बुरा नहीं है? का पहला प्रयास एसवीजी का उपयोग कर नकाबपोश संस्करण के लिए फ़िल्टर किया संस्करण को खत्म तुलना करते हैं:

बाईं एक को खत्म फ़िल्टर्ड और सही एक चित्रकार की तरह ऑफसेट पथ प्रभाव नकल करने के लिए छिपा होता है है। टोपी और मुंह में कोई अजीब कलाकृतियों!

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

<!-- To get the black stroke --> 
<use x="220" y="5" xlink:href="#head_path" fill="red" stroke="black" 
stroke-width="24" stroke-linecap="round" stroke-linejoin="round"/> 
<!-- To get the boldened shape --> 
<use x="220" y="5" xlink:href="#head_path" fill="red" stroke="red" 
stroke-width="21" stroke-linecap="round" stroke-linejoin="round"/> 

यह निम्न आकार का उत्पादन:

यहाँ दोनों मूल आकार और हमारे कस्टम ऑफसेट पथ के साथ एक प्रभाव लागू:

कैसे हमारे कस्टम boldening फिल्टर फैलने की तुलना:

बाईं एक (ऊपर) एसवीजी का उपयोग कर फैली हुई है: रों फिल्टर फ़ैल जाती है, ठीक एक हमारे कस्टम ऑफसेट पथ प्रभाव का उपयोग कर boldened है। बहुत अच्छा, मुझे पसंद है। पथ विश्वसनीय दूरी पर दिए गए दूरी पर मूल पथ और बेसबॉल टोपी पर स्क्रैपनेस का कोई संकेत नहीं है।

और अंत के सभी तारों को एक साथ खींच करते हैं:

बाईं एक (ऊपर) फ़ैल जाती/एसवीजी और सही एक के फिल्टर को खत्म उपयोग करता इलस्ट्रेटर-नक़ल ऑफसेट पथ प्रभाव है, जो एसवीजी मुखौटा का उपयोग कर हासिल की है का उपयोग करता है और मोटे स्ट्रोक। आप कौन सा चयन करेंगे?

निष्कर्ष: हमें जावास्क्रिप्ट या अन्य स्क्रिप्ट का उपयोग एसवीजी में मोटा या पतला ग्राफिकल तत्वों के लिए करने के लिए मजबूर नहीं किया जाता है। एसवीजी के इरोड और Dilate फिल्टर कुछ उद्देश्यों का उपयोग कर सकते हैं, लेकिन वे उच्च गुणवत्ता वाले पथ "संशोधन" के लिए उपयुक्त नहीं हैं। मास्क उपयोग करने के लिए थोड़ा जटिल हैं, लेकिन कुछ प्रयोगों के बाद आप उनसे परिचित हो जाते हैं। मुझे उम्मीद है कि भविष्य में एसवीजी ऑफसेट पथ प्रभाव को मूल रूप से हैक की तरह इस्तेमाल किए बिना समर्थन करेगा। http://jsfiddle.net/7Y4am/
(! टेस्ट में कम से कम स्ट्रोक चौड़ाई बदलने के लिए)

(माफ करना मेरा बुरा अंग्रेजी, जो देशी वक्ताओं मिल हँसने:

मैं तुम्हें फिल्टर और मास्क के साथ खेलने के लिए के लिए इन उदाहरणों में इस्तेमाल किया आकार jsfiddled मरने तक, लेकिन कृपया याद रखें, मैं मानवता के 94% से संबंधित हूं, जो मूल रूप से अंग्रेजी नहीं बोलता है। लेकिन सौभाग्य से हमारे पास Google अनुवाद है।)