มาพูดคุยเกี่ยวกับวิธีการวาดเส้นโค้งในผืนผ้าใบต่อไป วันนี้ฉันจะพูดถึง quadraticcurveto
พูดตามตรงวิธีนี้น่ากลัวเล็กน้อยคุณสามารถสัมผัสได้ก่อนจากชื่อของฟังก์ชั่น โดยวิธีการที่ฉันคิดว่าจำเป็นต้องย่อชื่อฟังก์ชั่นนี้ให้สั้นลง
กำลังสองหมายถึงสมการกำลังสองนั่นคือสมการกำลังสองกำลังสองในคณิตศาสตร์ พารามิเตอร์ของ ctx.quadraticcurveto มีดังนี้:
ctx.quadraticcurveto (x1, y1, x, y);
X และ Y อยู่ที่ไหนพิกัดของจุดสิ้นสุดและ X1 และ Y1 เป็นพิกัดของจุดควบคุมเส้นโค้งหรือไม่? อะไร คุณถามฉันว่าจุดเริ่มต้นอยู่ที่ไหน? จุดเริ่มต้นจะถูกกำหนดโดยใช้ Moveto ก่อนหน้านี้
เหตุผลที่ฉันวางพิกัดของจุดควบคุมด้วยหมายเลขซีเรียล 1 เป็นเพราะฟังก์ชั่นของเส้นโค้งการวาดที่กล่าวถึงในภายหลังมีจุดควบคุมสองจุดซึ่งคือ X2 และ Y2 ดังนั้นฉันจะให้การฉีดวัคซีนที่นี่ก่อน
จุดเริ่มต้นที่กำหนดโดย Moveto และจุดสิ้นสุดที่กำหนดโดย quadraticcurveto นั้นสามารถเชื่อมต่อเป็นเส้นตรงได้ เนื่องจาก QuadraticCurveto มีจุดควบคุมเพียงจุดเดียวจุดควบคุมนี้อยู่ทางด้านซ้ายของเส้นหรือทางด้านขวาของเส้นดังนั้น QuadraticCurveto สามารถวาดส่วนโค้งได้ แต่ยังไม่สามารถวาดเส้นรูปตัว S ได้
เพื่อความเข้าใจที่ง่ายฉันจะใช้วิธีการวาดเส้นเสริมในบทความก่อนหน้านี้ต่อไป รหัสเบื้องต้นมีดังนี้:
var x1 = 350
Y1 = 250
x = 400
y = 500;
ctx.beginpath ();
ctx.strokestyle = "#000";
ctx.moveto (300,300); // จุดเริ่มต้น
ctx.quadraticcurveto (x1, y1, x, y); // เส้นโค้งจริง
ctx.stroke ();
ctx.beginpath ();
ctx.strokestyle = "RGBA (255,0,0,0.5)";
ctx.moveto (300,300);
ctx.lineto (x1, y1); // บรรทัดนี้และบรรทัดถัดไปคือบรรทัดที่วาดจุดควบคุม
ctx.lineto (x, y);
ctx.moveto (300,300); // จุดเริ่มต้นและจุดสิ้นสุดของจุดเริ่มต้นและจุดสิ้นสุด
ctx.lineto (x, y);
ctx.stroke ();
ที่นี่ฉันได้วาดสองบรรทัดเสริมหนึ่งเส้นคือเส้นการเชื่อมต่อระหว่างจุดเริ่มต้นและจุดสิ้นสุดและอีกสายหนึ่งคือเส้นเสริมระหว่างจุดเริ่มต้นและจุดควบคุมจากนั้นไปยังจุดสิ้นสุด (จริงสอง) จุดตัดของสองบรรทัดนี้เป็นจุดควบคุมพิกัดของ quadraticcurveto
Quadraticcurveto สามารถวาดเส้นโค้งในส่วนโค้งได้ แต่ส่วนโค้งนี้อาจผิดปกติมากซึ่งเป็นการปรับปรุงเมื่อเทียบกับส่วนโค้งและ Arcto
นอกจากนี้ quadraticcurveto จะไม่มีการกลับรายการเช่น Arcto
แน่นอนถ้าคุณดึงจุดควบคุมไปไกลมากกราฟิกอาจไม่สามารถจดจำได้สำหรับคุณ ลองกันเถอะ:
Y1 = 950;
ฉันเพิ่งเปลี่ยน Y1 ให้ใหญ่ขึ้นเล็กน้อยและเส้นโค้งไปไกลกว่าผืนผ้าใบ
อย่างไรก็ตามช่วงของเส้นโค้งที่วาดโดย quadraticcurveto ไม่สามารถเข้าถึงหรือเกินพิกัดของจุดควบคุม เราเพียงแค่ต้องควบคุมจุดควบคุมได้ดีดังนั้นเราไม่ต้องกังวล
ฉันเขียนหน้าตัวอย่างการเคลื่อนไหวอย่างง่ายที่แสดงกระบวนการวาดเส้นโค้งใน quadraticcurveto หวังว่าจะช่วยให้คุณเข้าใจลึกซึ้งยิ่งขึ้น:
โปรดครอบคลุมมากขึ้นหากรหัสถูกเขียนน่าเกลียด