ในบทความก่อนหน้านี้ฉันได้พูดคุยเกี่ยวกับสามวิธีในการวาดเส้นโค้งในผืนผ้าใบ: อาร์ค, Arcto และ Quadraticcurveto พวกเขาทั้งหมดมีสิ่งหนึ่งที่เหมือนกันนั่นคือเส้นโค้งที่พวกเขาวาดสามารถลำเอียงไปด้านหนึ่งเท่านั้น ความแตกต่างที่ใหญ่ที่สุดระหว่าง Beziercurveto ที่กล่าวถึงในวันนี้และพวกเขาคือพวกเขามีจุดควบคุมสองจุดนั่นคือพวกเขาสามารถวาดเส้นโค้งรูปตัว S
Beziercurveto ซึ่งเป็นเส้นโค้ง Bezier ที่เรียกว่าหากคุณได้เรียนรู้เครื่องมือวาดภาพบางอย่างคุณสามารถเข้าใจได้ทันที
ไวยากรณ์ของ Beziercurveto มีดังนี้ :ctx.beziercurveto (x1, y1, x2, y2, x, y); ฉันจะอธิบายพารามิเตอร์ของเขาตามปกติ (x1, y1) เป็นพิกัดของจุดควบคุม 1, (x2, y2) เป็นพิกัดของจุดควบคุม 2 และ (x, y) เป็นพิกัดของจุดสิ้นสุด เช่นเดียวกับ quadraticcurveto พิกัดจุดเริ่มต้นของมันยังตั้งค่าไว้ล่วงหน้าโดย Moveto
ดังนั้น Beziercurveto การวาดเส้นโค้งต้องใช้ 4 คะแนน: จุดเริ่มต้น, จุดสิ้นสุด, จุดควบคุม 1, จุดควบคุม 2. สำหรับคำอธิบายที่ตามมาที่นี่ฉันคิดว่าจุดควบคุม 1 สอดคล้องกับจุดเริ่มต้นและจุดควบคุม 2 สอดคล้องกับจุดสิ้นสุด
ที่นี่เราจะพูดถึงปัญหาเก่า ๆ ของการวาดภาพผ้าใบซึ่งหมายความว่าการวาดรหัสทั้งหมดขึ้นอยู่กับการคาดเดาและคุณต้องรีเฟรชการวาดเพื่อทำความเข้าใจว่าคุณวาดที่ไหน
ฉันจะสานต่อประเพณีที่ดีก่อนหน้านี้และวาดเส้นเสริมเพื่อช่วยให้ทุกคนเข้าใจ:
var x1 = 450, // x พิกัดของจุดควบคุม 1
y1 = 300, // y ของจุดควบคุม 1
x2 = 450, // x ของจุดควบคุม 2
y2 = 500, // y ของจุดควบคุม 2
x = 300, // จุดสิ้นสุด x
y = 500; // จุดสิ้นสุด y
ctx.moveto (300,300); // จุดเริ่มต้น
ctx.beginpath ();
ctx.lineWidth = 5;
ctx.strokestyle = "rgba (0,0,0,1)"
ctx.moveto (300,300);
ctx.beziercurveto (x1, y1, x2, y2, x, y);
ctx.stroke ();
// เริ่มวาดเส้นเสริม
ctx.beginpath ();
ctx.strokestyle = "RGBA (255,0,0,0.5)";
ctx.lineWidth = 1;
// เชื่อมต่อจุดเริ่มต้นและจุดควบคุม 1
ctx.moveto (300,300);
ctx.lineto (x1, y1);
// เชื่อมต่อจุดสิ้นสุดและจุดควบคุม 2
ctx.moveto (x2, y2);
ctx.lineto (x, y);
// เชื่อมต่อจุดเริ่มต้นและจุดสิ้นสุด (พื้นฐาน)
ctx.moveto (300,300);
ctx.lineto (x, y);
ctx.stroke ();
ที่นี่ครั้งแรกฉันวาดเส้นโค้งคล้ายกับ quadraticcurveto ซึ่งมีอคติเพียงด้านเดียว บรรทัดนี้ดูเหมือนจะค่อนข้างกลมเนื่องจากพิกัด X ของจุดควบคุม 1 และ 2 เหมือนกัน
ตอนนี้วาดเส้นโค้งรูปตัว S เพื่อพิสูจน์ว่า beziercurveto นั้นมีเอกลักษณ์:
var x1 = 150;
-
ในความเป็นจริงเพียงแค่เปลี่ยนพิกัดของจุดควบคุม 1 ถ้าพิกัดของจุดควบคุม 1 และจุดควบคุม 2 ตามลำดับทั้งสองด้านของพื้นฐานเส้นโค้งรูปตัว S จะถูกวาด หากทั้งสองอยู่ด้านหนึ่งของพื้นฐานมันเป็นเอฟเฟกต์คล้ายกับ quadraticcurveto
สถานการณ์ของตัวอย่างนี้ค่อนข้างง่าย พื้นฐาน (จุดเริ่มต้นถึงจุดสิ้นสุด) เป็นแนวตั้ง แต่ส่วนใหญ่ในการใช้งานจริงพื้นฐานของเราคือเอียงดังนั้นสถานการณ์จึงซับซ้อนกว่ามาก แต่มาลองด้วยตัวเอง
วิธีการวาดแต่ละวิธีดูค่อนข้างเดี่ยวในฟังก์ชั่น แต่วิธีการที่ทรงพลังรวมกันด้วยวิธีเดียว ในบทความที่ตามมาฉันพยายามอธิบายวิธีการวาดภาพทั่วไปบางอย่างเช่นสี่เหลี่ยมโค้งมนและจุดไข่ปลา พวกเขาจำเป็นต้องรวมวิธีเดียวเหล่านี้ในอดีต