HTML5 Canvas Drawing Tutorial (8) - วิธี BEZIERCURVETO สำหรับการวาดเส้นโค้งในผ้าใบ

ความคิดเห็น: ARC, Arcto และ QuadraticCurveto พวกเขาทั้งหมดมีสิ่งหนึ่งที่เหมือนกันนั่นคือเส้นโค้งที่พวกเขาวาดสามารถลำเอียงไปด้านหนึ่งเท่านั้น ความแตกต่างที่ใหญ่ที่สุดระหว่าง Beziercurveto ที่กล่าวถึงในวันนี้และพวกเขาเป็นจุดควบคุมสองจุดนั่นคือเส้นโค้งรูปตัว S สามารถวาดได้ เพื่อนที่สนใจสามารถเรียนรู้ได้

ในบทความก่อนหน้านี้ฉันได้พูดคุยเกี่ยวกับสามวิธีในการวาดเส้นโค้งในผืนผ้าใบ: อาร์ค, 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

สถานการณ์ของตัวอย่างนี้ค่อนข้างง่าย พื้นฐาน (จุดเริ่มต้นถึงจุดสิ้นสุด) เป็นแนวตั้ง แต่ส่วนใหญ่ในการใช้งานจริงพื้นฐานของเราคือเอียงดังนั้นสถานการณ์จึงซับซ้อนกว่ามาก แต่มาลองด้วยตัวเอง

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