राफेल

Question

में पथों के साथ 'डोनट छेद' कैसे प्राप्त करें I इसमें एक आकृति खींचना है जिसमें छेद है जैसे कि मैं इसे fill आकार दे सकता हूं और उस रंग से छेद नहीं हो सकता (उन्हें पारदर्शी छोड़ दें)।

W3 path spec के अनुसार:

यौगिक पथ (अर्थात, कई उपपथ के साथ एक पथ) इस तरह के "डोनट छेद" वस्तुओं के रूप में प्रभाव की अनुमति के लिए संभव हो रहे हैं।

क्या कोई Raphael में वेक्टर पथ के साथ इसे निष्पादित करने का एक बहुत ही सरल उदाहरण दे सकता है?

बहुत बहुत धन्यवाद।

Answer 1

यदि आप चाल जानते हैं तो यह काफी सरल हो जाता है। उदाहरण this doesn't work के लिए:

paper.path("M 50 50 L 50 150 L 150 150 L 150 50 z" + 
      " M 75 75 L 75 125 L 125 125 L 125 75 z") 
.attr("fill", "#f00"); 

लेकिन this does work *:

paper.path("M 50 50 L 50 150 L 150 150 L 150 50 z" + 
      " M 75 75 L 125 75 L 125 125 L 75 125 z") 
.attr("fill", "#f00"); 

अंतर डोनट प्रकट करने के लिए के लिए आंतरिक पथ है यह कोने बाहरी पथ के लिए उलटे क्रम में तैयार है के लिए वह यह है कि (यानी एक घड़ी की दिशा खींचें, अन्य घड़ी के विपरीत)। text.xml.svg.devel archives पर मुझे मिली एक टिड्बिट।

(*) 3,6

Answer 2

Firefox 3.6 में यह काम करने के लिए कम से कम, यह क्रोम, ओपेरा और फ़ायरफ़ॉक्स में काम करता है 4.0 बीटा, लेकिन नहीं, आप छेद बंद करने के लिए की जरूरत है; यानी आंतरिक सीमा को परिभाषित करते समय निर्देशांक स्वयं को वापस शामिल करते हैं। उत्सुकता से, यह बाहरी सीमा के लिए आवश्यक नहीं दिखता है।

paper.path("M 50 50 L 50 150 L 150 150 L 150 50 z" + 
      " M 75 75 L 125 75 L 125 125 L 75 125 L 75 75 z") 
.attr("fill", "#f00"); 

बस एक क्विक नोट टिप्पणी पर नजर रखने के लिए - दक्षिणावर्त/वामावर्त अवधारणा पहली बार में अजीब लग सकता है लेकिन यह जीआईएस/सीएडी प्रौद्योगिकियों भर सुंदर मानक है।

Answer 3

मुझे लगता है कि ऐसा करने का सही तरीका "fill-rule" मान को "evenodd" मान में सेट कर रहा है। svg spec पर एक नज़र डालें:

इसे "Raphael.Element.attr()" के साथ सेट करने का प्रयास न करें। यह काम नहीं करता है। मैं इसके बजाय jQuery.attr() फ़ंक्शन का उपयोग करता हूं:

// assuming paper is a Raphael.Paper object 
path = paper.path('Mx,y{some path commands for the main shape}Z' 
        +'Mx,y{some path commands for the hole}Z' 
); 

// this doesn't work 
path.attr({'fill-rule': 'evenodd'}); 
// neither this 
path.attr({fillRule: 'evenodd'}); 

// if you inspect the object returned by paper.path 
// you can see it has a reference to the DOM element 
console.debug(path) 

// so a bit of jQuery and it's done 
$(path[0]).attr('fill-rule', 'evenodd'); 

मैंने इसे सफल परिणामों के साथ जटिल पथों पर उपयोग किया है।

Answer 4

परिपत्र डोनट, महान आसान प्लगइन करने के लिए देखने वाले हर व्यक्ति के लिए Raphael-donut-plugin

सार:

Raphael.fn.donut = function(x, y, innerRadius, outerRadius) { 
    y -= outerRadius; 
    return this.path('M'+x+' '+y+'a'+outerRadius+' '+outerRadius + 
     ' 0 1 0 1 0m-1 '+ 
     (outerRadius - innerRadius)+ 
     'a'+innerRadius+' '+innerRadius+ 
     ' 0 1 1 -1 0'); 
};