เรียนรู้เพิ่มเติมเกี่ยวกับวิธีแก้ปัญหาการวาดภาพบนผืนผ้าใบที่ไม่ชัดเจนบนอุปกรณ์มือถือ

เนื่องจากเหตุผลด้านความเข้ากันได้ของอุปกรณ์เคลื่อนที่ หนึ่งในโครงการของเราจึงจำเป็นต้องมีส่วนหน้าในการแปลง PDF เป็นอินเทอร์เฟซที่สามารถดูได้โดยตรงบนหน้าอุปกรณ์เคลื่อนที่ เพื่ออำนวยความสะดวกในการแก้ปัญหา เราใช้ปลั๊กอิน pdf.js ซึ่งสามารถแปลง pdf ให้เป็นแคนวาสและวาดลงบนเพจได้ อย่างไรก็ตามในระหว่างขั้นตอนการทดสอบพบว่าเนื้อหาที่วาดบนเบราว์เซอร์มือถือนั้นเบลอมาก (ดังที่แสดงด้านล่าง) หลังจากการวิเคราะห์พบว่ามีสาเหตุมาจากหน้าจอความละเอียดสูงของเทอร์มินัลมือถือ หลังจากแก้ไขปัญหาแล้ว ให้เขียนเหตุผลและข้อค้นพบเป็นลายลักษณ์อักษร

ก่อนที่จะอธิบายปัญหา คุณต้องเข้าใจความรู้พื้นฐานเกี่ยวกับจอแสดงผลบนมือถือและถ้ำก่อน เพื่ออำนวยความสะดวกในการสำรวจเพิ่มเติม หากต้องการเห็นผลโดยตรงสามารถเลื่อนดูให้จบได้

พิกเซลทางกายภาพเรียกอีกอย่างว่าพิกเซลของอุปกรณ์ เรามักจะได้ยินว่าความละเอียดของโทรศัพท์มือถือคือพิกเซลจริง ตัวอย่างเช่น ความละเอียดทางกายภาพของ iPhone 7 คือ 750 * 1334 หน้าจอประกอบด้วยพิกเซล ซึ่งหมายความว่าหน้าจอมี 750 พิกเซลในแนวนอนและ 1,334 พิกเซลในแนวตั้ง

เรียกอีกอย่างว่าพิกเซลแบบลอจิคัล ขนาดของ Iphone4 และ Iphone3GS มีทั้ง 3.5 นิ้ว ความละเอียดทางกายภาพของ iphone4 คือ 640 * 980 ในขณะที่ 3gs มีเพียง 320 * 480 ถ้าเราวาดภาพที่มีความกว้าง 320px ตาม เค้าโครงจริงใน iphone4 มีเพียงครึ่งหน้าจอเท่านั้นที่มีเนื้อหา และอีกครึ่งหนึ่งว่างเปล่า เพื่อหลีกเลี่ยงปัญหานี้ เราจึงแนะนำพิกเซลแบบลอจิคัลและตั้งค่าพิกเซลแบบลอจิคัลของโทรศัพท์มือถือทั้งสองเครื่องเป็น 320px เพื่อความสะดวกในการวาดภาพ

พิกเซลที่เป็นอิสระจากอุปกรณ์ข้างต้นมีไว้เพื่อความสะดวกในการคำนวณในที่สุด เราได้รวมพิกเซลแบบลอจิคัลของอุปกรณ์เข้าด้วยกัน แต่พิกเซลทางกายภาพที่แสดงโดยแต่ละพิกเซลแบบลอจิคัลนั้นไม่แน่นอน เพื่อที่จะกำหนดความสัมพันธ์ระหว่างพิกเซลทางกายภาพและพิกเซลแบบลอจิคัลโดยไม่ต้องปรับขนาด , , เราได้แนะนำแนวคิดของอัตราส่วนพิกเซลของอุปกรณ์ (DPR)

 อัตราส่วนพิกเซลของอุปกรณ์ = พิกเซลของอุปกรณ์ / พิกเซลลอจิคัล DPR = DP / DIP

มีทฤษฎีมากมายที่กล่าวมาข้างต้น นี่คือรูปภาพที่จะอธิบาย

ดังที่เห็นได้จากรูปด้านบน ด้วยขนาดพิกเซลแบบลอจิคัลที่เท่ากัน หน้าจอที่มีความละเอียดสูงจึงมีพิกเซลทางกายภาพมากกว่า ภายใต้หน้าจอปกติ 1 พิกเซลแบบลอจิคัลสอดคล้องกับ 1 พิกเซลจริง ในขณะที่ภายใต้หน้าจอความละเอียดสูงที่มี dpr = 2 พิกเซลแบบลอจิคัล 1 พิกเซลจะประกอบด้วย 4 พิกเซลจริง นี่คือเหตุผลว่าทำไมหน้าจอความละเอียดสูงจึงมีความละเอียดอ่อนมากกว่า

นี่คือจุดความรู้ที่ทุกคนที่รู้จัก Canvas ควรรู้ และยังเป็นแก่นของปัญหาที่เราจะวิเคราะห์ต่อไป

เราจะทิ้งคำอธิบายของบิตแมปไว้ในภายหลัง ตอนนี้เราเพียงแต่ต้องรู้ว่าภาพที่วาดด้วยแคนวาสนั้นเป็นบิตแมป

คุณลักษณะความกว้างและความสูงของผืนผ้าใบนั้นง่ายมากสำหรับผู้เริ่มต้นที่จะทำผิดพลาด คุณสมบัติทั้งสองนี้มักจะสับสนกับคุณสมบัติความกว้างและความสูงใน CSS

ตัวอย่างเช่น เรามีรหัสต่อไปนี้ (1):

 <ความกว้างของผ้าใบ=600 ความสูง=300 สไตล์=ความกว้าง: 300px; ความสูง: 150px></canvas> 

• ความกว้างและความสูงในรูปแบบตามลำดับแสดงถึงความกว้างและความสูงที่องค์ประกอบแคนวาสบนอินเทอร์เฟซใช้ ซึ่งก็คือความกว้างและความสูงในรูปแบบ
• ความกว้างและความสูงในแอตทริบิวต์ แสดงถึงความกว้างและความสูงของพิกเซลจริงของผืนผ้าใบ

หากคุณยังคงไม่เข้าใจ คุณสามารถจินตนาการได้ว่าเป็นโค้ดต่อไปนี้ (2):

 <!-- พิกเซลของ logo.png คือ 600 * 300 --><img style=width: 300px; height: 150px src=logo.png />

ความกว้างและความสูงเริ่มต้นของผืนผ้าใบคือ 300 * 150 หลังจากตั้งค่า CSS ผืนผ้าใบจะถูกปรับขนาด (หมายเหตุไม่ครอบตัด) ตามความกว้างและความสูงของ CSS ที่ตั้งไว้ ซึ่งเหมือนกับแท็ก img

โค้ดด้านบน (1) สามารถอธิบายได้จริงด้วยวิธีที่ได้รับความนิยมมากกว่า กล่าวคือ จริง ๆ แล้วพิกเซลลอจิคัลหนึ่งพิกเซลเต็มไปด้วยแคนวาสพิกเซลสองพิกเซล

ข้อมูลข้างต้นเป็นการแนะนำความรู้พื้นฐานที่จำเป็น และการสำรวจอย่างเป็นทางการจะเริ่มด้านล่าง

ก่อนอื่น เราพูดถึงว่าการใช้แคนวาสในการวาดภาพคือบิตแมป และ jpg และ PNG ที่เรามักใช้ก็เป็นบิตแมปด้วย บิตแมปคืออะไร?

บิตแมปหรือที่เรียกว่าแผนที่พิกเซลหรือแผนที่แรสเตอร์ จัดเก็บและแสดงภาพโดยการบันทึกสี ความลึก ความโปร่งใส และข้อมูลอื่นๆ ของแต่ละจุดในรูปภาพ เพื่อให้ชัดเจนยิ่งขึ้น คุณสามารถมองบิตแมปว่าเป็นปริศนาขนาดใหญ่ ปริศนานี้มีชิ้นส่วนนับไม่ถ้วน และแต่ละชิ้นแสดงถึงพิกเซลสีทึบ ตามทฤษฎีแล้ว หนึ่งบิตแมปพิกเซลจะสอดคล้องกับหนึ่งพิกเซลจริง แต่ถ้าคุณใช้หน้าจอความละเอียดสูง เช่น จอเรตินาของ Apple ในการดูภาพล่ะ

สมมติว่าเรามีรหัสต่อไปนี้ซึ่งจะแสดงบนหน้าจอเรตินาของ iPhone 4:

 <ความกว้างของผ้าใบ=320 ความสูง=150 สไตล์=ความกว้าง: 320px; ความสูง: 150px></canvas>

พิกเซลจริงของ iPhone 4 คือ 640 * 980 ในขณะที่พิกเซลอิสระของอุปกรณ์คือ 320 * 480 ซึ่งหมายความว่า 1 พิกเซล CSS นั้นจริงๆ แล้วประกอบด้วยพิกเซลจริง 4 พิกเซล พิกเซลของ Canvas คือ 320 * 150 และพิกเซล CSS คือ 320 * 150 หมายความว่าหนึ่ง CSS พิกเซลจะประกอบด้วยองค์ประกอบแคนวาสหนึ่งองค์ประกอบ ดังนั้นการแปลงจึงทำได้ดังนี้: บนหน้าจอเรตินา แคนวาสพิกเซลหนึ่งพิกเซล (หรือหนึ่งบิตแมปพิกเซล) จะเต็ม 4 พิกเซลทางกายภาพ เนื่องจากพิกเซลบิตแมปเดียวไม่สามารถแบ่งเพิ่มเติมได้ จึงทำได้เพียงสีที่ใกล้ที่สุด ส่งผลให้ภาพเบลอ

หากคุณยังคงสับสน รูปภาพต่อไปนี้สามารถแสดงให้เห็นว่าบิตแมปเต็มบนหน้าจอเรตินาได้อย่างไร:

ด้านซ้ายของภาพด้านบนแสดงกฎการแสดงผลบนหน้าจอปกติ จะเห็นได้ว่ามี 4 บิตแมปพิกเซล ในขณะที่หน้าจอความละเอียดสูงทางด้านขวามี 16 พิกเซล เนื่องจากพิกเซลไม่สามารถตัดได้ สีจึงเปลี่ยนไป

แต่สิ่งหนึ่งที่ไม่ได้อธิบายอย่างชัดเจนคือเหตุใดภาพจึงใช้สีที่ใกล้ที่สุดแทนที่จะใช้ค่าดั้งเดิมโดยตรง นี่เป็นสาเหตุเบื้องหลังความเบลอเช่นกัน

ต่อไปนี้คือสิ่งที่เพื่อนร่วมชั้นรุ่นพี่คนหนึ่งช่วยฉันอธิบาย เมื่อกี้เราบอกว่าแต่ละองค์ประกอบบิตแมปจริงๆ แล้วเป็นพิกเซลสีทึบ ตอนนี้ สมมติว่าเราต้องวาดตัวเลข 0 บนหน้าจอปกติด้วยขนาด css 4px * 4px และ dpr เป็น 1 จากนั้นสิ่งที่เราวาดควรมีลักษณะเหมือนภาพต่อไปนี้ โดยที่ 1 หมายถึงพิกเซลสีดำ และ 0 หมายถึงพิกเซลสีขาว

จะเห็นได้ว่าเมื่อ dpr ค่อนข้างเล็ก รูปแบบ 0 ของเราก็ยังค่อนข้างชัดเจน ทีนี้ถ้าขนาด css ของเรายังคงไม่เปลี่ยนแปลง แต่ภาพถูกวาดบนหน้าจอเรตินา เอฟเฟกต์จะเป็นอย่างไร

เรารู้ว่าภายใต้หน้าจอเรตินา พิกเซล CSS หนึ่งพิกเซลแทนพิกเซลจริง 4 พิกเซล หากเราไม่ดำเนินการใดๆ จัดเรียงโดยตรงตามเมทริกซ์ด้านบน และขยายเมทริกซ์ เราจะพบว่าภายใต้หน้าจอเรตินา รูปแบบของเรามี ความรู้สึกหยักที่ชัดเจนมากภาพขาดสีอย่างชัดเจน

ถ้าเราเปลี่ยนภาพเล็กน้อยให้เปลี่ยนเป็นภาพต่อไปนี้

ภาพให้ความรู้สึกนุ่มนวลขึ้นทันที แต่จุดที่ควรจะเต็มไปด้วย 4 0s กลายเป็น 3 1s บวก 1 0 จริงๆ แล้วนี่คือกระบวนการปรับให้เรียบของภาพ เพื่อแก้ไขความรู้สึกหยัก สีเดิมจึงเปลี่ยนไป ในภาพที่มีสีต่างๆ มากขึ้น เพื่อให้ดูเป็นธรรมชาติมากขึ้น ข้อต่อของภาพจึงกลายเป็นสีโดยประมาณเช่นกัน อธิบายว่าทำไม เวลาเติมสีด้านบน ไม่ใช่สีเดิม แต่ใช้สีโดยประมาณ

หลังจากผ่านคำอธิบายข้างต้นแล้ว ให้เราสรุปข้อสรุปต่อไปนี้ ขณะนี้เทอร์มินัลมือถือได้รับความนิยมและหน้าจอความละเอียดสูงได้รับความนิยมโดยทั่วไปแล้ว พิกเซล CSS ขนาด 1px แสดงถึงพิกเซลจริง 4 พิกเซลขึ้นไป อย่างไรก็ตาม เนื่องจากปัญหาโค้ดของเรา พิกเซล CSS 1px และแคนวาสพิกเซล 1 พิกเซลมีค่าเท่ากัน ซึ่งส่งผลให้แคนวาสพิกเซล 1 พิกเซลจำเป็นต้องเติมด้วยพิกเซลจริง 4 พิกเซลขึ้นไป เพื่อให้มั่นใจว่าการประมวลผลภาพที่ราบรื่น การเติมพิกเซลที่เหลือ พิกเซลใช้การประมาณสีดั้งเดิม ส่งผลให้ภาพเบลอ

เมื่อคุณเข้าใจสาเหตุของปัญหาแล้ว ก็เป็นเรื่องง่ายที่จะแก้ไขปัญหา สิ่งที่สำคัญที่สุดในการแก้ปัญหาคือการทำให้พิกเซลแคนวาสหนึ่งพิกเซลและพิกเซลทางกายภาพหนึ่งพิกเซลเท่ากัน

มีแอตทริบิวต์devicePixelRatioที่แขวนอยู่ใต้วัตถุหน้าต่างของเบราว์เซอร์เวอร์ชันที่สูงกว่า ซึ่งเป็น dpr ที่กล่าวถึงข้างต้น

เมื่อกำหนดความกว้างและความสูงขององค์ประกอบผ้าใบ css เราก็สามารถทำได้

 ให้ canvas = document.getElementById('canvas');let ctx = canvas.getContext('2d');let dpr = window.devicePixelRatio; // สมมติว่า dpr คือ 2// รับความกว้างและความสูงของ css ให้ { width: cssWidth ความสูง: cssHeight } = canvas.getBoundingClientRect();// ตาม dpr ให้ขยายพิกเซลของแคนวาสเพื่อให้หนึ่งแคนวาสพิกเซลเท่ากับหนึ่งพิกเซลจริง canvas.width = dpr * cssWidth; canvas.height = dpr * cssHeight; // เมื่อแคนวาสขยาย ระบบพิกัดของ canvas ก็ขยายออกเช่นกัน หากเนื้อหาการวาดขึ้นอยู่กับระบบพิกัดดั้งเดิม เนื้อหาจะลดลง // ดังนั้นจึงต้องขยายขนาดการวาด ctx.scale(dpr,dpr);

หลายครั้งที่เราพบปัญหาเราไม่สามารถมุ่งความสนใจไปที่การแก้ปัญหาได้ แต่เราควรเข้าใจสาเหตุของปัญหาอย่างลึกซึ้งเพื่อที่จะก้าวไปข้างหน้าได้ดีขึ้น

ข้างต้นคือเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการศึกษาของทุกคน ฉันหวังว่าทุกคนจะสนับสนุน VeVb Wulin Network