2010-09-07 7 views
5

मैं एचटीएमएल 5 और कैनवास के बारे में एक पुस्तक पढ़ रहा हूं, निम्नलिखित कोड 1-पिक्सेल मोटी रेखाएं उत्पन्न करेगा ... यह समन्वय के रूप में 0.5 का उपयोग करता है। यदि यह 0 या 10, या कुछ पूर्णांक में बदल दिया गया है, तो रेखाएं ग्रे हो जाएंगी, और 2-पिक्सेल मोटी हो जाएगी। ऐसा क्यों है? मैंने हाल ही में देखा है कि अजीब बात ... एप्पल या Win32 एपीआई से पहले सभी प्रोग्रामिंग, वे पूर्णांक निर्देशांक द्वारा जाते हैं।एचटीएमएल 5 में, कैनवास पर 1-पिक्सेल मोटी रेखा प्राप्त करने के लिए (0.5, 0) से (0.5, 600) तक खींचे। 0.5 अजीब है?

<!DOCTYPE html> 

<body> 
<canvas id="c" width="800" height="600"></canvas> 
</body> 

<script> 

var c_canvas = document.getElementById("c") 
var context = c_canvas.getContext("2d") 

for (x = 0.5; x < 500; x += 10) { 
    context.moveTo(x, 0) 
    context.lineTo(x, 375) 
} 
context.strokeStyle = "#000" 
context.stroke() 


</script> 

एक और अजीब बात है, 1 पिक्सेल काले बिंदु से 1 पिक्सेल प्राप्त करने के लिए, मैं एक्स के लिए 0.5 पर आकर्षित करने के लिए है, लेकिन y

for (x = 0.5; x < 500; x += 10) { 
    context.moveTo(x, 0) 
    context.lineTo(x, 1) 
} 

के लिए पूर्णांकों का उपयोग करता है, तो मैं निम्नलिखित का उपयोग करें, तो मैं एक ग्रे, "अब डॉट"

for (x = 0.5; x < 500; x += 10) { 
    context.moveTo(x, 0.5) 
    context.lineTo(x, 1.5) 
} 

उत्तर

6

मुझे यकीन है कि यह यह एचटीएमएल 5 के साथ एक ही है नहीं कर रहा हूँ मिलता है, लेकिन यह बहुत चित्र के साथ कैसे क्यूटी पुस्तकालय सौदों के समान दिखता है। अनिवार्य रूप से, (0,0) और (1,1) निर्देशांक शीर्ष बाएं कोने में एक पिक्सेल परिभाषित करते हैं - इसका केंद्र इस प्रकार (0.5, 0.5) पर स्थित होता है।

इसे एंटीअलाइजिंग के साथ करना है - यदि आप (1,1) पर एक ब्लैक पिक्सेल "ड्रॉ" करते हैं, तो 4 ग्रे पिक्सेल वास्तव में ग्रे (0,0) और (2,2) के बीच ग्रे रंगा जाएगा। C++ GUI programming with Qt 4 में इसके बारे में और पढ़ें।

11

धन्यवाद MiKy। मैं भी पर कुछ स्पष्टीकरण पाया:

कुरकुरा लाइनों प्राप्त करने को समझने के रास्तों stroked कर रहे हैं की आवश्यकता है:

https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Applying_styles_and_colors#A_lineWidth_example

यह प्रासंगिक सामग्री है। नीचे में, ग्रिड कैनवास समन्वय ग्रिड का प्रतिनिधित्व करता है। ग्रिडलाइन के बीच वर्ग वास्तविक ऑन-स्क्रीन पिक्सेल हैं। पहले नीचे ग्रिड छवि में, एक आयताकार (2,1) से (5,5) भर जाता है। उनके बीच का पूरा क्षेत्र (हल्का लाल) पिक्सेल सीमाओं पर पड़ता है, इसलिए परिणामी भरे आयताकार कुरकुरा किनारों पर होगा।

Crisp and Blurry lines example

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

इसे ठीक करने के लिए, आपको अपने पथ निर्माण में बहुत सटीक होना होगा। यह जानकर कि 1.0 चौड़ाई रेखा पथ के किसी भी पक्ष पर आधे इकाई को बढ़ाएगी, जिससे पथ (3.5,1) से (3.5,5) के पथ को स्थिति में तीसरी छवि में स्थिति-1.0 लाइन चौड़ाई समाप्त होती है पूरी तरह से ऊपर और ठीक एक एकल पिक्सेल लंबवत रेखा भरना।

+0

+1 - लिंक कुछ अच्छे आरेखों के साथ सबसे अच्छा स्पष्टीकरण है। – Castrohenge

+0

यह लिंक समस्या और समाधान की व्याख्या करता है। –

+0

लिंक अब टूटा हुआ है – streppel

2

संक्षेप में, पिक्सल को विभाजित नहीं किया जा सकता है। जब आप 1 पिक्सेल लाइन खींचने के लिए लाइन का उपयोग करते हैं, तो रेखा आपके द्वारा निर्दिष्ट समन्वय पर केंद्रित होती है। यदि चौड़ाई = 1 और समन्वय एक पूर्णांक है, तो आप एक पिक्सेल के 2 हिस्सों को आकर्षित करने के लिए कह रहे हैं।

चूंकि आप आधा पिक्सेल चालू नहीं कर सकते हैं, इसलिए लाइब्रेरी किसी भी तरफ निकटतम विभाजित पिक्सेल तक जाती है।

0

मैं उस समय से कम या कम लड़ाई करता हूं जब कभी भी मैं कैनवास का उपयोग करके कुछ समय बाद शुरू करता हूं - आप स्क्रीन पर लाइनों पर "गणितीय" रेखाओं के साथ काम नहीं करते हैं।

दूसरों के रूप में उल्लेख किया है - (1,10) के लिए (1,1) की एक पंक्ति पिक्सेल के बीच शुरू होता है (0/0, 1/1) और के बीच (0/10, 1/11)

समाप्त होता है इसलिए यह 1 पिक्सेल चौड़ा और 1 पिक्सेल ऊंचा है। लेकिन अच्छी तरह से थोड़ा हल्का ...

मेरा समाधान, यदि आप केवल "हार्ड - पूर्णांक - रेखाएं" ड्राइंग के लिए कैनवास का उपयोग कर रहे हैं, उदाहरण के लिए , एक नियंत्रण बनाने के लिए transform(1,0,0,1,0.5,0.5) उपयोग करने के लिए है (या transform(1,0,0,1,-0.5,-0.5) निर्भर करता है कि आप 0 के साथ शुरू करना चाहते हैं या 1)

(मुझे यकीन है कि प्राप्त करने के लिए बदलना, वहाँ नहीं है कि एक (क) या (घ का उपयोग करें) फिर से बनाने मेरे जीवन कठिन)

सिर्फ शून्य "0 और 1 के बीच" लाइन पर बदलाव (अब तुम मेरी उपनाम पता है ...)

यह मेरी सभी मामलों में ठीक काम करता है, जहां मैं (ड्राइंग हूँ या आकर्षित करने के लिए है) "पिक्सेल"

संबंधित मुद्दे