ดำเนินการต่อด้วยบทช่วยสอนการวาดเส้น Canvas Line บทความก่อนหน้า
ครั้งสุดท้ายที่เราพูดถึงว่าบางครั้งผ้าใบมี 1 พิกเซลที่เบลอและดูเหมือนจะกว้างขึ้นดังแสดงในรูปด้านล่าง:
เห็นได้ชัดว่าเส้นดังกล่าวไม่ใช่สิ่งที่เราต้องการ
จุดประสงค์ของบทความนี้คือการหาหลักการและแก้ปัญหา
ทุกคนรู้ว่าขนาดการแสดงผลที่เล็กที่สุดบนหน้าจอคือ 1 พิกเซล แม้ว่าสิ่งที่น้อยกว่า 1 พิกเซลอาจไม่ปรากฏ แต่คอมพิวเตอร์ก็ไม่สนใจและเขาจะพยายามวาดมัน
ในความเป็นจริงพิกเซลก็เป็นหน่วยหลังจากทั้งหมด หากเราขยายผืนผ้าใบให้มีขนาดใหญ่พอที่จะเห็นแต่ละพิกเซลอย่างชัดเจนจะเกิดอะไรขึ้น? มันอาจจะเป็นเช่นนี้:
แต่ละพิกเซลมีช่วงเริ่มต้นและจุดสิ้นสุดดังที่แสดงในรูปช่วงของพวกเขาเริ่มต้นจากด้านซ้ายครอบคลุม 1 พิกเซลและหยุดขวา
หากเราทำตามช่วงเริ่มต้นและจุดสิ้นสุดของพิกเซลเมื่อวาด 1 พิกเซลบรรทัดเราจะได้รับเส้นบาง ๆ มาตรฐานมาก ดังนี้:
แต่น่าเสียดายที่เส้นผ้าใบถูกวาดแตกต่างกัน ในบทความก่อนหน้านี้เราได้กล่าวไปแล้วว่าผืนผ้าใบแต่ละเส้นมีเส้นกึ่งกลางบาง ๆ ที่ไม่ จำกัด และความกว้างของเส้นขยายจากเส้นกึ่งกลางไปยังทั้งสองด้าน หากเรายังคงวาดเส้นจากจุดพิกเซลที่สองแล้วเส้นกึ่งกลางของเส้นจะอยู่ใกล้กับจุดเริ่มต้นของพิกเซลที่สองจากนั้นเราก็เริ่มวาดและปัญหามาถึง: เส้นผืนผ้าใบขยายไปถึงทั้งสองด้าน หลังจากขยายสายของเราเป็นเช่นนี้จริง ๆ :
มีปัญหาอีกประการหนึ่งในเวลานี้: คอมพิวเตอร์ไม่อนุญาตให้กราฟิกน้อยกว่า 1px ดังนั้นเขาจึงประนีประนอม: วาดทั้งสองพิกเซล
ดังนั้นด้วยวิธีนี้บรรทัด 1px ดั้งเดิมกลายเป็นบรรทัดที่ดูกว้าง 2px
พบสาเหตุของความล้มเหลว: เส้นในผืนผ้าใบจัดแนวกึ่งกลางกับจุดเริ่มต้นของพิกเซลไม่ใช่จุดกึ่งกลางของพิกเซล
แล้วเราจะแก้ปัญหาที่เจ็บปวดนี้ได้อย่างไร? บางทีบางคนอาจคิดว่า: เนื่องจากจุดเริ่มต้นทั้งสองนั้นแตกต่างกันไปให้ทำคะแนนเริ่มต้นเหมือนกัน!
เราแค่ต้องจัดแนวกลางของเส้นกับจุดกึ่งกลางของพิกเซล!
จุดกลางของพิกเซลหาง่าย ตัวอย่างเช่นจุดกลางของพิกเซลที่สองคือตำแหน่งของ 1.5 พิกเซลตามคำอธิบายในรูปดังนั้นจุดกลางของพิกเซล X คือ (X-0.5) PX
แน่นอนในโอกาสที่เข้มงวดน้อยกว่าคุณสามารถใช้ x+0.5
ตอนนี้ลองผลลัพธ์ของเราบนผืนผ้าใบ
ctx.moveto (100.5,100.5);
ctx.lineto (200.5,100.5);
ctx.lineto (200.5,200.5);
ctx.lineto (100.5,200.5);
ctx.lineto (100.5,100.5);
ctx.closepath ();
ctx.lineWidth = 1;
ctx.strokestyle = 'rgba (255,0,0,0.5)';
ctx.stroke ();
มันดูใช่มั้ย
แต่ดูเหมือนว่าเมื่อเราวาดเส้นเราสับสนมาก เรามักจะเพิ่มความหดหู่ 0.5 หรือไม่? ไม่แน่นอนเพราะเราใช้ตัวแปรเพื่อประหยัดค่าเกือบตลอดเวลาดังนั้นเราไม่จำเป็นต้องเพิ่ม 0.5 ในแต่ละค่า
ยิ่งไปกว่านั้นสำหรับสายที่มี linewidth> 1 เราไม่ต้องกังวลเกี่ยวกับเรื่องนี้: เพราะปัญหานี้ชัดเจนที่สุดเมื่อบรรทัดกว้าง 1px