मैं HTML5 कैनवास में बहुभुज किनारे सिलाई कलाकृतियों से कैसे बच सकता हूं?

Question

मैं OpenHeatMap ओपन-सोर्स प्रोजेक्ट के लिए समांतर फ्लैश और HTML5/कैनवास रेंडरर बनाए रखता हूं। मैं दो संस्करणों के बीच आंशिक निर्देशांक के साथ भरे बहुभुज के प्रतिपादन में एक असंगतता से पीड़ित हूं। यदि आप किनारे को साझा करने वाले दो बहुभुज प्रस्तुत करते हैं, तो कैनवास उस किनारे के साथ एक दृश्यमान उपस्थिति दिखाएगा, जबकि फ्लैश एक साथ दोनों रंगों को एक साथ जोड़ देगा, अगर वे एक ही रंग के हों तो कोई फर्क नहीं पड़ता। मैं एक साथ एक न्यूनतम पेज रख दिया है यहाँ मुद्दा दिखाने के लिए:

http://web.mailana.com/labs/stitchingbug/

[Gak, स्पैम निवारण यदि यह एक छवि होने से बंद हो जाता है, लेकिन यहाँ एक स्क्रीनशॉट web.mailana.com/labs/stitchingbug के लिए देख मौलिक मुद्दा यह है कि यह किसी भी जटिल बहुभुज करने के लिए असंभव है है

github.com/petewarden/stitchingbug

: .png]

स्रोत, एक ही बात कर Flash परियोजना के साथ-साथ यहाँ है आर अगर आप बिना बहुमत के बहुभुज सिलाई नहीं कर सकते हैं तो धीरज रखें। मुझे नहीं पता कि फ़्लैश के भरने के नियम क्या हैं, लेकिन वे 3 डी प्रस्तुतकर्ताओं के रूप में सही परिणाम उत्पन्न करते हैं। क्या किसी के पास इस समस्या के आसपास काम करने के लिए क्लाइंट-साइड फिक्स है? यह क्रॉस-ब्राउजर है, जो इसे जानबूझकर प्रतीत होता है, इसलिए इस्तेमाल किए गए नियमों के किसी भी संदर्भ की भी सराहना की जाएगी। यहां कैनवास कोड है:

var ctx = canvas.getContext('2d'); 
    ctx.fillStyle = 'rgb(0,0,0)'; 

    ctx.beginPath() 
    ctx.moveTo(0, 0); 
    ctx.lineTo(50.5, 0); 
    ctx.lineTo(50.5, 100); 
    ctx.lineTo(0, 100); 
    ctx.closePath(); 
    ctx.fill(); 

    ctx.beginPath() 
    ctx.moveTo(50.5, 0); 
    ctx.lineTo(100, 0); 
    ctx.lineTo(100, 100); 
    ctx.lineTo(50.5, 100); 
    ctx.closePath(); 
    ctx.fill(); 

Answer 1

क्या आपने सभी ड्राइंग कॉर्डों को छेड़छाड़ करने पर विचार किया है? यह गुणवत्ता को कम नहीं करना चाहिए, और यह आपकी समस्या को ठीक कर सकता है।

आप समस्या को अदृश्य बनाने के लिए परेशान क्षेत्र पर एक रेखा भी खींच सकते हैं।

यदि अन्य सभी विफल हो जाते हैं, तो यह काम करना चाहिए।

Answer 2

यह एक पुराना सवाल है, लेकिन मुझे एक ही समस्या थी।

मुझे लगता है कि दो बहुभुज (या उनके चारों ओर एक रूपरेखा) के बीच एक पंक्ति को चित्रित करना समस्या को हल करता है (कम से कम फ़ायरफ़ॉक्स और क्रोम में)।

ऐसा लगता है कि कम से कम क्रोम और फ़ायरफ़ॉक्स में अंतर भरना प्रतीत होता है।

ctx.beginPath() 
ctx.moveTo(50.5, 0); 
ctx.lineTo(50.5, 100); 
ctx.stroke(); 

और निश्चित रूप से strokeStyle सेट करना सुनिश्चित करें: यह ctx.fill() के बाद ctx.stroke() कॉल करें, या इस प्रकार एक पंक्ति आकर्षित करने के लिए पर्याप्त है।

Answer 3

मैं क्रोम 41.0.2272.89 मीटर में एक ही मुद्दा देख सकते हैं यहां तक ​​कि जब निर्देशांक सभी पूर्णांकों हैं: http://jsfiddle.net/xgd03fyb/

var canvas = document.getElementById('myCanvas'); 
var context = canvas.getContext('2d'); 
context.lineWidth = 0; 
context.fillStyle = 'black'; 

context.beginPath(); 
context.moveTo(100, 100); 
context.lineTo(200, 200); 
context.lineTo(200, 100); 
context.closePath(); 
context.fill(); 

context.beginPath(); 
context.moveTo(100, 100); 
context.lineTo(100, 200); 
context.lineTo(200, 200); 
context.closePath(); 
context.fill(); 

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

मैंने "evenodd" से "evenodd" से कोई भाग्य के साथ fillStyle (तर्क भरने के लिए पारित तर्क) को चैन करने का भी प्रयास किया है।

यह कल्पना https://html.spec.whatwg.org/multipage/scripting.html#dom-context-2d-fill से मेरे लिए स्पष्ट नहीं है कि यह कैसे इतना काम करना चाहिए मैं अधिक जानने के लिए बग दायर किया है: https://www.w3.org/Bugs/Public/show_bug.cgi?id=28217