เนื่องจาก Canvas ดั้งเดิมรองรับเฉพาะเส้นโค้ง Bezier ลำดับที่สามเท่านั้น ฉันควรทำอย่างไรหากต้องการเพิ่มจุดควบคุมหลายจุด (แม้แต่เส้นโค้งที่ซับซ้อนส่วนใหญ่ก็สามารถจำลองด้วย Bezier ลำดับที่สามได้) ในขณะเดียวกันก็เป็นเรื่องยากสำหรับเราที่จะเข้าใจตำแหน่งของจุดควบคุม Bezier อย่างสังหรณ์ใจได้อย่างชัดเจน เราต้องการ? เพื่อที่จะแก้ไขปัญหาสองข้อข้างต้น ดูเหมือนว่าจะไม่มีวิธีแก้ปัญหาระดับ N (เวอร์ชัน js) ในชุมชน ดังนั้นคราวนี้ผู้เขียนจึงจริงจังกับโอเพ่นซอร์ส bezierMaker.js มาก!
ตามทฤษฎีแล้ว bezierMaker.js รองรับการสร้างเส้นโค้ง Bezier แบบ N-order และยังเป็นพื้นที่ทดสอบสำหรับนักพัฒนาในการเพิ่มและลากจุดควบคุมเพื่อสร้างชุดภาพเคลื่อนไหวการวาดภาพในท้ายที่สุด เป็นเรื่องง่ายมากสำหรับนักพัฒนาที่จะทราบเส้นโค้งรุ่นต่างๆ ที่สอดคล้องกับจุดควบคุมในตำแหน่งต่างๆ
หากคุณชอบงานนี้ ยินดีรับดาว เพราะดาวนั้นหามาได้ยาก -
ที่อยู่โครงการ : ที่นี่✨✨✨
เหตุใดจึงต้องมีพื้นที่พิสูจน์?เมื่อวาดเส้นโค้ง Bezier ที่มีลำดับสูงที่ซับซ้อน คุณจะไม่สามารถทราบตำแหน่งที่แม่นยำของจุดควบคุมของเส้นโค้งที่คุณต้องการได้ เมื่อจำลองในสนามทดสอบสามารถรับค่าพิกัดของจุดควบคุมได้แบบเรียลไทม์ พิกัดจุดที่ได้รับสามารถแปลงเป็นอาร์เรย์วัตถุและส่งผ่านไปยังคลาส BezierMaker เพื่อสร้างเส้นโค้งเป้าหมาย
การเรนเดอร์
การทำงาน<script src=./bezierMaker.js></script>วาด
การเรนเดอร์ด้านบนแสดงการใช้งานไซต์ทดสอบ หลังจากที่คุณได้รับพิกัดที่แม่นยำของจุดควบคุมผ่านไซต์ทดสอบแล้ว คุณสามารถเรียก bezierMaker.js เพื่อวาดเส้นโค้งได้โดยตรง
/** * วัตถุ DOM ของ canvas canvas * อาร์เรย์จุดควบคุม bezierCtrlNodesArr รวมถึงพิกัด x, y * สีเส้นโค้งสี */var canvas = document.getElementById('canvas')//ใช้วิธีการดั้งเดิมเพื่อนำไปใช้ก่อนระดับ 3 var arr0 = [ {x:70,y:25},{x:24,y:51}]var arr1 = [{x:233,y:225},{x:170,y:279},{x:240,y:51}]var arr2 = [{x:23,y:225},{x:70, y:79},{x:40,y:51},{x:300, y:44}]var arr3 = [{x:333,y:15},{x:70,y:79},{x:40,y:551},{x:170,y:279},{x:17,y:239} ]var arr4 = [{x:53,y:85},{x:170,y:279},{x:240,y:551},{x:70,y:79},{x:40,y:551} ,{x:170,y:279}]var bezier0 = ใหม่ BezierMaker(canvas, arr0, 'black')var bezier1 = ใหม่ BezierMaker(canvas, arr1, 'red')var bezier2 = ใหม่ BezierMaker(canvas, arr2, 'blue')var bezier3 = ใหม่ BezierMaker(canvas, arr3, 'yellow')var bezier4 = ใหม่ BezierMaker(canvas, arr4, 'สีเขียว')bezier0.drawBezier()bezier1.drawBezier()bezier2.drawBezier()bezier3.drawBezier()bezier4.drawBezier()พล็อตผลลัพธ์
เมื่อมีจุดควบคุมน้อยกว่า 3 จุด ระบบจะใช้อินเทอร์เฟซ API ดั้งเดิม เมื่อมีจุดควบคุมมากกว่า 2 จุด ฟังก์ชันที่เราใช้จะถูกใช้เพื่อวาดจุด
หลักการสำคัญวาดเส้นโค้งเบซิเยร์
จุดหลักของการวาดเส้นโค้ง Bezier อยู่ที่การใช้สูตร Bezier:
P0-Pn ในสูตรนี้แสดงถึงการดำเนินการด้านพลังงานต่างๆ ของแต่ละจุดและสัดส่วน t จากจุดเริ่มต้นไปยังจุดควบคุมแต่ละจุด จากนั้นไปยังจุดสิ้นสุด
BezierMaker.prototype.bezier = function(t) { //เรียกสูตร Bezier var x = 0, y = 0, bezierCtrlNodesArr = this.bezierCtrlNodesArr, //อาร์เรย์จุดควบคุม n = bezierCtrlNodesArr.length - 1, self = this bezierCtrlNodesArr .forEach (ฟังก์ชั่น (รายการ, ดัชนี) { if(!index) { x += item.x * Math.pow(( 1 - t ), n - ดัชนี) * Math.pow(t, ดัชนี) y += item.y * Math.pow(( 1 - t ), n - ดัชนี) * Math.pow(t, index) } else { //factorial คือฟังก์ชันแฟกทอเรียล x += self.factorial(n) / self.factorial(index) / self.factorial(n - index) * item.x * คณิตศาสตร์ . เพาว์(( 1 - t ), n - ดัชนี) * Math.pow(t, ดัชนี) y += self.factorial(n) / self.factorial(ดัชนี) / self.factorial(n - ดัชนี) * item.y * คณิตศาสตร์ pow(( 1 - t ), n - ดัชนี) * Math.pow(t, ดัชนี) } }) กลับ { x: x, y: y }}สำรวจจุดทั้งหมดและคำนวณพิกัดจุดปัจจุบัน x, y บนเส้นโค้ง Bezier ตามค่าของสัดส่วนปัจจุบัน t (0<=t<=1) ผู้เขียนแบ่งค่าของ t ออกเป็น 1,000 ส่วน นั่นคือ t+=0.01 สำหรับแต่ละการดำเนินการ ค่า x และ y ที่คำนวณได้ในขณะนี้คือจุดหลังจากเส้นโค้ง Bezier แบ่งออกเป็น 1,000 ส่วน เมื่อค่า t เคลื่อนที่จาก 0 ถึง 1,1000 ครั้ง พิกัดที่สอดคล้องกัน 1,000 x และ y จะถูกสร้างขึ้น และสามารถจำลองเส้นโค้ง Bezier ที่มีลำดับสูงได้ด้วยจุดวาดและเส้นตามลำดับ
ผู้เขียนจะอธิบายที่มาของสูตร Bezier โดยเฉพาะในบทความต่อๆ ไป ตอนนี้คุณเพียงแค่ต้องรู้ว่าเราใช้สูตร Bezier เพื่อคำนวณว่าเส้นโค้ง Bezier จริงแบ่งออกเป็น 1,000 จุด แล้วเชื่อมต่อจุดต่างๆ ด้วยเส้นตรง สามารถจำลองเส้นโค้งคลาสได้
การใช้แอนิเมชั่นที่สร้างโดยเส้นโค้ง Bezier ในสนามจำลอง
รหัสที่เกี่ยวข้องสำหรับส่วนนี้สามารถพบได้ที่นี่
แนวคิดโดยรวมคือการใช้วิธีการเรียกซ้ำเพื่อถือว่าจุดควบคุมแต่ละชั้นเป็นฟังก์ชัน Bessel ลำดับที่หนึ่ง เพื่อคำนวณจุดควบคุมชั้นถัดไปและเชื่อมต่อตามลำดับ ผู้เขียนจะทิ้งตรรกะเฉพาะไว้จนกว่าจะมีคำอธิบายเชิงลึกเกี่ยวกับหลักการของสูตรเส้นโค้ง Bezier เพื่อแยกแยะหลักการสร้างแอนิเมชั่นของไซต์ทดสอบ~
สรุปผู้เขียนต้องการเปิดแหล่งที่มาบางอย่างมาโดยตลอด (แต่ไม่มีอะไรที่เขาสามารถเขียนได้) อย่างไรก็ตาม ทุกสิ่งที่ปกติใช้นั้นถูกเขียนโดยผู้อื่น และการสร้างวงล้อขึ้นมาใหม่ไม่สามารถเขียนได้ดีโดยผู้อื่น คราวนี้ฉันพบพื้นที่ที่ดูว่างเปล่า ดังนั้นฉันจึงตัดสินใจอย่างจริงจังที่จะเปิดแหล่งที่มานี้ แอปพลิเคชั่นขั้นสูงของ Bezier ใน gayhub ส่วนใหญ่เป็นการใช้งาน Android ยังมีอีกหลายที่ในส่วนหน้าที่สามารถขยายความได้ ยินดีต้อนรับการอภิปรายมากมาย!
ในที่สุดที่อยู่โครงการ : ที่นี่✨✨
ที่อยู่ไซต์ทดสอบ: อย่าลืมเข้ามาเล่น✨✨✨
ข้างต้นคือเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการศึกษาของทุกคน ฉันหวังว่าทุกคนจะสนับสนุน VeVb Wulin Network