ในบทความก่อนหน้านี้ฉันได้พูดคุยเกี่ยวกับวิธีการวาดรูปสี่เหลี่ยมผืนผ้าและวงกลม พวกเขาทั้งหมดมีฟังก์ชั่นการวาดภาพผืนผ้าใบพื้นเมืองที่สามารถทำให้เสร็จได้ สี่เหลี่ยมโค้งมนที่กล่าวถึงในบทความนี้สามารถจำลองได้ผ่านวิธีอื่นเท่านั้น
สำหรับสี่เหลี่ยมโค้งมนปกติก่อนอื่นสมมติว่ามุมโค้งมนของมุมทั้งสี่นั้นเหมือนกัน - เพราะมันง่ายกว่าที่จะวาด เราใช้ความสามารถในการแยกพื้นผิวออกเป็นเส้นและเป็นเรื่องง่ายที่จะพบว่าสี่เหลี่ยมผืนผ้าโค้งมนนั้นประกอบด้วยเส้นโค้งคล้ายตะขอ 4 เส้น
เมื่อพูดถึงตะขอถ้าคุณอ่านบทความของฉันแนะนำ Arcto คุณอาจเข้าใจได้ทันทีว่ากราฟิกประเภทนี้สามารถวาดได้โดยใช้ Arcto
เมื่อฉันพูดคุยเกี่ยวกับ Arcto ฉันบอกว่า Arcto มีลักษณะที่ว่าการขยายแทนเจนต์ครั้งที่สองของมันจะไม่ส่งผลกระทบต่อเส้นที่เขาวาด (ในส่วนสุดท้ายข้างต้น) ซึ่งยังช่วยให้เราสามารถวาดรูปสี่เหลี่ยมผืนผ้าแบบโค้งมนโดยไม่ต้องกังวลเกี่ยวกับการเสียรูป
ต่อไปนี้เป็นวิธีการวาดรูปสี่เหลี่ยมผืนผ้าโค้งมนที่ฉันพบในเว็บไซต์ต่างประเทศซึ่งควรมีประสิทธิภาพมากที่สุด
// รอบสี่เหลี่ยมผืนผ้า
CanvasrenderingContext2d.prototype.RoundRect = function (x, y, w, h, r) {
if (w & lt; 2 * r) r = w / 2;
if (h & lt; 2 * r) r = h / 2;
this.beginpath ();
this.moveto (x+r, y);
this.arcto (x+w, y, x+w, y+h, r);
this.arcto (x+w, y+h, x, y+h, r);
this.arcto (x, y+h, x, y, r);
this.arcto (x, y, x+w, y, r);
// this.arcto (x+r, y);
this.closepath ();
คืนสิ่งนี้;
-
พารามิเตอร์ของฟังก์ชั่นนี้คือ X พิกัด, พิกัด y, ความกว้างความสูงและรัศมีมุมโค้งมน ให้ความสนใจเป็นพิเศษกับพารามิเตอร์สุดท้าย - รัศมีมุมโค้งมน
วิธีนี้ใช้ Arcto 4 ครั้งในการวาดสี่เหลี่ยมโค้งมนและส่วนโค้งของแต่ละมุมเหมือนกัน จุดพิกัดของสี่เหลี่ยมผืนผ้าที่โค้งมนนี้ยังเป็นมุมซ้ายบนเดียวกับสี่เหลี่ยมผืนผ้า แต่จุดเริ่มต้นของมันไม่ได้อยู่ที่นี่ แต่::
คุณสามารถลบหนึ่งบรรทัดและดูว่าวิธีนี้เป็นอย่างไร
แน่นอนฉันอยากจะเตือนคุณว่าไม่ว่าคุณจะวาดรูปร่างอะไรคุณต้องจำไว้ว่าให้ปิดเส้นทาง - ClosePath เพื่อหลีกเลี่ยงการออกจากอันตรายที่ซ่อนอยู่
วิธีนี้มีการส่งคืนสิ่งนี้ในตอนท้ายซึ่งช่วยให้คุณสามารถใช้ไวยากรณ์โซ่เช่น:
CTX.RoundRect (200,300,200,120,20) .stroke (); คุณสามารถลบได้หากคุณไม่ต้องการ
หากคุณไม่ต้องการขยายต้นแบบ ContextrenderingContext2D คุณสามารถใช้วิธีนี้เพื่อทำฟังก์ชั่นอื่น
เมื่อฉันค้นพบฟังก์ชั่นนี้ฉันไม่รู้ด้วยซ้ำว่า Arcto คืออะไรดังนั้นฉันจึงจำไม่ได้ว่าเว็บไซต์ใดที่ฉันพบ อย่างไรก็ตามมันไม่ได้เป็นต้นฉบับสำหรับฉัน ขอบคุณผู้แต่ง
ในบทความก่อนหน้านี้ฉันมักจะเน้นว่าแต่ละมุมของรูปสี่เหลี่ยมผืนผ้าโค้งมนที่วาดในวิธีนี้สอดคล้องกันเนื่องจากแนวชายแดนใน CSS3 สามารถวาดรูปสี่เหลี่ยมผืนผ้าโค้งมนได้อย่างง่ายดายด้วยส่วนโค้งที่ไม่สอดคล้องกันของแต่ละมุมหรือแม้แต่แต่ละมุม ฉันจะหาวิธีที่จะวาดรูปสี่เหลี่ยมผืนผ้าโค้งมนที่ผิดปกติในผืนผ้าใบ แต่โดยส่วนตัวแล้วฉันคิดว่ามันค่อนข้างยาก