svg: 'रूपरेखा पथ' उत्पन्न करें

Question

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

क्या मैं है में एक रास्ता है कि ग्रे आकार चारों ओर चलाता है पाने के लिए दिलचस्पी है (जैसे मिल भूरे/सफेद सीमा पर, और आकार के चारों ओर घूमते हैं जब तक कि आप शुरुआती बिंदु पर वापस न आएं)।

मैं इस तरह के पथ की गणना करने के बारे में कैसे जाऊं?

<g> 
    <title>number 3</title> 
    <path d="m238,50c5.67569,-1.01351 11.8327,-3.8229 20.92029,-2.14724c8.68106,0.69732 14.21173,4.90255 18.07971,7.14724c6.23697,3.61945 13.47556,9.5931 15,18c1.07056,5.90372 1.17343,10.97649 -4,16c-6.76816,6.57204 -19.45392,9.57738 -25.69687,10.59046c-3.94836,0.64074 4.73492,3.29883 10.69687,5.40954c8.05417,2.85142 15,8 21,14c6,6 5.26578,10.94739 5.26578,17.03015c-2.4541,7.30975 -4.23343,11.08675 -11.26578,12.96985c-3.98279,1.0665 -11.92578,3.49756 -17,4c-8.95618,0.88684 -15.80411,2.97838 -26,0l-9.19197,-3.44464" id="svg_1" opacity="0.5" stroke-width="10" stroke-linejoin="round" stroke="#000000" fill="none"/> 
</g> 

Answer 1

मैं svgContour समारोह है कि इस के समान परिदृश्यों के लिए माना जाता है,
जिसके परिणामस्वरूप समोच्च ऑफसेट stroke-width मूल्य से संबंधित नहीं है और समारोह के लिए एक पैरामीटर के रूप में स्थापित किया जाना चाहिए बनाया।

इस समय यह एक समय में एक ऑफ़सेट पक्ष मिलेगा, लेकिन प्रति पक्ष एक बार इसे चलाने से आप इस मुद्दे को हल कर सकते हैं।

TLDR
svgContour के माध्यम से वास्तव में आप किसी भी svg आकार के समोच्च पा सकते हैं, वर्तमान में यह भरने मोड का समर्थन नहीं करता लेकिन अगले लक्ष्यों में से एक है कि लागू करने के लिए है।

• redrawSteepCurve
  परिसर: एक और करने के लिए एक beizer-वक्र समानांतर ड्राइंग प्राप्त नहीं है यह getPathData पर निर्भर करता है() किसी भी SVGGeometryElement की pathData प्राप्त करने के लिए, तो इस डेटा तीन चरणों से चला जाता है वक्र के बिंदुओं/नियंत्रण-बिंदुओं को बस ऑफसेट करना जब तक वक्र पर्याप्त रूप से फ्लैट न हो (इस मामले में दृश्य प्रतिपादन ठीक होगा); यह विधि एक एसवीजीपीथडेटा लेती है और यदि इसे एक तेज वक्र मिल जाता है तो यह इसे तब तक विभाजित करता है जब तक कि यह पर्याप्त फ्लैट न हो (एक दृश्यमान समकक्ष एसवीजीपीथडेटा लौटाएं)।

• contourPathData
  इस स्तर pathData अंक में dissambled जाता है, अंक, खंडों में जुड़े हुए हैं प्रत्येक खंड offsetted है, कोई चौराहा बिंदु तो प्रत्येक सन्निहित खंड (के लिए पाया जाता है कि हम क्या वापस पाने की एक सूची है ऑफसेट अंक)।

• drawLine
  इस चरण चरण 1 से आ रही pathData में 2 कदम से अंक देता है, और अंत में समोच्च खींचता है।

एक उदाहरण:

const path = document.querySelector('path') 
 

 
svgContour(path, 5)

svg { 
 
    width: 100vw; 
 
    height: 100vh 
 
}

<script src="https://cdn.rawgit.com/fracalo/svg-contour/master/dist/svg-contour.js"></script> 
 

 
<svg viewBox='300 0 100 200'> 
 
    <g> 
 
    <title>number 3</title> 
 
    <path d="m238,50c5.67569,-1.01351 11.8327,-3.8229 20.92029,-2.14724c8.68106,0.69732 14.21173,4.90255 18.07971,7.14724c6.23697,3.61945 13.47556,9.5931 15,18c1.07056,5.90372 1.17343,10.97649 -4,16c-6.76816,6.57204 -19.45392,9.57738 -25.69687,10.59046c-3.94836,0.64074 4.73492,3.29883 10.69687,5.40954c8.05417,2.85142 15,8 21,14c6,6 5.26578,10.94739 5.26578,17.03015c-2.4541,7.30975 -4.23343,11.08675 -11.26578,12.96985c-3.98279,1.0665 -11.92578,3.49756 -17,4c-8.95618,0.88684 -15.80411,2.97838 -26,0l-9.19197,-3.44464" 
 
    id="svg_1" opacity="0.5" stroke-width="10" stroke-linejoin="round" stroke="#000000" fill="none" /> 
 
    </g> 
 
</svg>

समोच्च का पता लगाया है!

Answer 2

मुझे यकीन है कि यह आपकी समस्या नहीं सुलझती है कि क्या नहीं कर रहा हूँ:

संदर्भ के लिए

, यह मेरा svg की जानकारी है। यह इस बात पर निर्भर करता है कि आप रूपरेखा पथ के साथ क्या करना चाहते हैं।

पोस्टस्क्रिप्ट में स्ट्रोक किए गए पथों के लिए एक रूपरेखा की गणना करने की कार्यक्षमता है, जो इसे भरते समय, मूल पथ को स्ट्रोक करने के समान दृश्य आउटपुट उत्पन्न करेगा। हालांकि, परिणामी पथ डेटा अपेक्षा से कम सुरुचिपूर्ण हो सकता है।

निम्नलिखित पोस्टस्क्रिप्ट कार्यक्रम (यह path2outlines.ps कॉल एक "fillable" एसवीजी मार्ग में एक पोस्टस्क्रिप्ट पथ बदल जाता है:।

%! 
% First, we're converting to outlines. 
strokepath 

% This is just a string buffer 
/S 99 string def 

% This defines a procedure for printing coordinates to stdout 
/printCoordinates {  % coord* number command 
    print     % coord* number 
    array astore   % array 
    {      % coord 
    ()print   % coord 
    //S cvs    % string 
    print    % 
    }forall 
    (\n)print 
} bind def 

% This iterates over the path segments and prints the SVG path data. 
{2(M) printCoordinates} 
{2(L) printCoordinates} 
{6(C) printCoordinates} 
{(Z\n)print} 
pathforall 

quit 

आप (% एक टिप्पणी शुरू होता है) इस तरह यह डेटा फ़ाइलों को खिलाने के लिए है चलो कॉल इस data.ps:

%! 
% First, set up the graphics state parameters 
% Equivalent to stroke-width="10" 
10 setlinewidth 

% Equivalent to stroke-linejoin="round" (0 = miter, 1 = round, 2 = bevel) 
1 setlinejoin 

% Now, we're defining the path. 
% Use postfix notation, i.e. first coordinates, then command. 
% m/M = moveto 
% l = rlineto 
% L = lineto 
% c = rcurveto 
% C = curveto 

238 50 moveto 
5.67569 -1.01351 11.8327 -3.8229 20.92029 -2.14724 rcurveto 
8.68106 0.69732 14.21173 4.90255 18.07971 7.14724 rcurveto 
6.23697 3.61945 13.47556 9.5931 15 18 rcurveto 
1.07056 5.90372 1.17343 10.97649 -4 16 rcurveto 
-6.76816 6.57204 -19.45392 9.57738 -25.69687 10.59046 rcurveto 
-3.94836 0.64074 4.73492 3.29883 10.69687 5.40954 rcurveto 
8.05417 2.85142 15 8 21 14 rcurveto 
6 6 5.26578 10.94739 5.26578 17.03015 rcurveto 
-2.4541 7.30975 -4.23343 11.08675 -11.26578 12.96985 rcurveto 
-3.98279 1.0665 -11.92578 3.49756 -17 4 rcurveto 
-8.95618 0.88684 -15.80411 2.97838 -26 0 rcurveto 
-9.19197 -3.44464 rlineto 

मंच आप उपयोग कर रहे आधार पर, आप को लागू करने की Ghostscript उपयोग कर सकते हैं यह कुछ इसी तरह करने के लिए:

gs -q data.ps path2outlines.ps > outlinePath.txt 

इसे आज़माएं, लेकिन मुझे यकीन नहीं है कि आप संतुष्ट होंगे या नहीं। आउटपुट की जटिलता समस्या की वास्तविक जटिलता के बारे में एक संकेत दे सकती है। विशेष रूप से आत्म-अंतरण पथ एक समस्या है।

संपादित करें (समस्याओं का बोलना): मेरा मानना ​​है कि सामान्य रूप से यह एक बेजियर वक्र बनाने के लिए गणितीय रूप से संभव नहीं है जो किसी दिए गए बेज़ीयर वक्र के लिए पूरी तरह से "समांतर" है।

Answer 3

यह बहुत मांग है। ईमानदारी से मुझे संदेह है कि आप एक जादू कोड लिखने में सक्षम होंगे जो ऐसा करेगा, एक lib के बिना जो यह आपके लिए करेगा।

इस तकनीक को कभी-कभी "बफर" कहा जाता है। एक वस्तु के चारों ओर एक बफर बनाने की तरह।

यदि आप प्रोग्रामिंग लैंग सी का उपयोग कर सकते हैं तो आपको एलईडीए लाइब्रेरी को देखना चाहिए। जावा में मैं कुछ भी नहीं जानता, शायद GeoTools lib।