एचटीएमएल कैनवास पर भी अजीब भरने का उपयोग

Question

क्या कोई ओपन सोर्स लाइब्रेरीज़ (जावास्क्रिप्ट) है जो कैनवास पर भी अजीब भरने का नियम लागू करता है। यदि मैं इसे स्वयं लागू करने का प्रयास करता हूं तो यह कितना जटिल होगा (सामान्य मामले पर जटिल घटता भी है) और यह प्रदर्शन पर मारा जाएगा (जेवस्क्रिप्ट में प्रत्येक पिक्सेल के लिए इसे करने के ऊपरी हिस्से के कारण)।

गैर-शून्य घुमाव में भी अजीब भरने के तरीकों को बदलने के लिए क्या तरीके हैं (एक सामान्य समाधान पर विचार करना जो हर मामले के लिए काम करेगा)। एक बार जब मैंने पाया कि आकार को सभी गैर-अंतरंग बहुभुजों में विभाजित करना था और उन्हें अलग से भरना था।

एक विकल्प एसवीजी का उपयोग करें और कैनवास पर एसवीजी आकर्षित करने के लिए है, लेकिन मैं यह भी पाया कि देशी एसवीजी प्रतिपादन थोड़ा आईपैड पर धीमी है, लेकिन एसवीजी धीमी है यहाँ तक कि जब मैं (iPad पर) एचटीएमएल कैनवास पर आकर्षित?

अग्रिम धन्यवाद

Answer 1

में मैं के रूप में मैं उसी के लिए कुछ समय पहले देख रहा था इस सवाल बारे में जाना। यही है, एक HTML कैनवास के अंदर एक "evenodd" भरने नियम का उपयोग करें।

थोड़ा सा शोध करने के बाद, और मेलिंग सूचियों और पैच के माध्यम से जाने के बाद, मैंने देखा कि, जैसा कि यह पता चला है, फ़ायरफ़ॉक्स और क्रोम दोनों के हाल के संस्करणों के लिए इसका समर्थन है, लेकिन प्रत्येक एक अलग, ब्राउज़र-विशिष्ट, तरीके से है।

फ़ायरफ़ॉक्स में यह mozFillRule attribute का उपयोग करने का विषय है। उदाहरण:

// 
// Firefox Example 
// 
// canv has the HTML canvas element 
var ctx = canv.getContext("2d"); 
ctx.fillStyle = "#ff0000"; 
ctx.mozFillRule = 'evenodd'; 
ctx.beginPath(); 
ctx.moveTo(100, 10); 
ctx.lineTo(40, 180); 
ctx.lineTo(190, 60); 
ctx.lineTo(10,60); 
ctx.lineTo(160,180); 
ctx.closePath(); 
ctx.fill(); 

क्रोम में, आप इसे fill विधि के लिए एक पैरामीटर के रूप में स्ट्रिंग evenodd पास करके करते हैं। उदाहरण:

// 
// Chrome Example 
// 
// canv has the HTML canvas element 
var ctx = canv.getContext("2d"); 
ctx.fillStyle = "#ff0000"; 
ctx.beginPath(); 
ctx.moveTo(100, 10); 
ctx.lineTo(40, 180); 
ctx.lineTo(190, 60); 
ctx.lineTo(10,60); 
ctx.lineTo(160,180); 
ctx.closePath(); 
ctx.fill('evenodd'); 

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

Answer 2

fill() method API देखें:

void ctx.fill(); 
    void ctx.fill(fillRule); 
    void ctx.fill(path, fillRule); 

fillRule हो सकता है "अशून्य" या "evenodd"
--- "अशून्य": अशून्य घुमावदार नियम, जो कि डिफ़ॉल्ट नियम है।
--- "evenodd": यहां तक ​​कि विषम घुमावदार नियम।

ब्राउज़र संगतता:
--- आईई 11+, फ़ायरफ़ॉक्स 31+, क्रोम ठीक है।
--- मैंने आईई 9/10 पर परीक्षण नहीं किया।
--- पुराने फ़ायरफ़ॉक्स 30/30- के साथ ctx.mozFillRule = 'evenodd'; का उपयोग करें।