ネイティブ Canvas は 3 次ベジェ曲線までしかサポートしていないため、複数のコントロール ポイントを追加したい場合はどうすればよいですか? （最も複雑な曲線でも、3 次ベジェを使用してシミュレーションできます。）同時に、ベジェ制御点の位置を直感的にどの程度設定して曲線を形成できるかを明確に理解することは困難です。欲しいですか？上記の 2 つの問題点を解決するための N レベルのソリューション (js バージョン) がコミュニティにないようです。そこで、今回は著者がオープンソースの bezierMaker.js について真剣に考えています。
bezierMaker.js は理論的には N 次ベジェ曲線の生成をサポートしており、開発者がコントロール ポイントを追加およびドラッグして最終的に一連の描画アニメーションを生成するためのテスト環境も提供します。開発者にとって、さまざまな位置の制御点に対応するさまざまな生成曲線を知ることは非常に直感的です。
この作品が気に入ったら、ぜひスターを獲得してください。 。
プロジェクトアドレス：こちら✨✨✨
なぜ試験場が必要なのでしょうか?複雑な高次ベジェ曲線を描画する場合、必要な曲線の制御点の正確な位置を知ることはできません。テストフィールドでシミュレーションする場合、制御点の座標値をリアルタイムで取得でき、取得した点座標をオブジェクト配列に変換してBezierMakerクラスに渡してターゲット曲線を生成できます。
レンダリング
関数<script src=./bezierMaker.js></script>描く
上のレンダリングは、テスト サイトの使用法を示しています。テスト サイトを通じてコントロール ポイントの正確な座標を取得した後、bezierMaker.js を呼び出して曲線を直接描画できます。
/** * キャンバス Canvas の DOM オブジェクト * 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, 'green')bezier0.drawBezier()bezier1.drawBezier()bezier2.drawBezier()bezier3.drawBezier()bezier4.drawBezier()結果をプロットする
コントロール ポイントが 3 つ未満の場合は、ネイティブ API インターフェイスが使用されます。制御点が 3 つ以上ある場合は、実装した関数を使用して点を描画します。
基本原則ベジェ曲線を描く
ベジェ曲線を描く中心点は、ベジェ公式の適用にあります。
この式の P0 ～ Pn は、各点のさまざまなべき乗演算と、始点から各制御点、そして終点までの割合 t を表します。
BezierMaker.prototype.bezier = function(t) { //ベジェ式呼び出し var x = 0, y = 0, bezierCtrlNodesArr = this.bezierCtrlNodesArr, //制御点配列 n = bezierCtrlNodesArr.length - 1, self = this bezierCtrlNodesArr .forEach (関数(項目, インデックス) { if(!インデックス) { 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 * Math .パウ(( 1 - t ), n - インデックス) * Math.pow(t, インデックス) y += self.factorial(n) / self.factorial(index) / self.factorial(n - インデックス) * item.y * Math. pow(( 1 - t ), n - インデックス) * Math.pow(t, インデックス) } }) return { x: x, y: y }}すべての点を走査し、現在の比率 t (0<=t<=1) の値に基づいてベジェ曲線上の現在の点の座標 x、y を計算します。著者は、t の値を 1000 の部分、つまり各操作に対して t+=0.01 に分割します。このとき計算されるxとyはベジェ曲線を1000等分した後の点になります。 t 値が 0 から 1 まで 1000 回移動すると、対応する x および y 座標が 1000 個生成され、点と線を順番に描画することで高次ベジェ曲線をシミュレートできます。
ベジェ公式の導出については、後の記事で詳しく説明します。ここでは、実際のベジェ曲線を 1000 個の点に分割し、それらの点を直線で結ぶためにベジェ公式を使用することを理解するだけで済みます。クラスカーブをシミュレートできます。
シミュレーションフィールドでのベジェ曲線によるアニメーションの実装
この部分に関連するコードはここにあります
全体的なアイデアは、再帰的手法を使用して制御点の各層を 1 次ベッセル関数として扱い、制御点の次の層を計算し、それに応じて接続することです。著者は、テストサイトのアニメーション生成原理を整理するために、ベジェ曲線公式の原理を詳細に説明するまで、具体的なロジックを残しておきます~
まとめ著者は常に何かをオープンソース化したいと考えていました（しかし、彼が書けることは何もありません）。しかし、通常使用されるものはすべて他の人が書いたものであり、車輪の再発明は他の人がうまく書くことはできません。今度は、一見空白の領域を見つけました。そこで私は、これをオープンソースにするという非常に厳粛な決定を下しました。ゲイハブのベジェの高度なアプリケーションのほとんどは Android 実装です。フロントエンド分野にはまだ拡張できるところがたくさんあります。議論は大歓迎です。
やっとプロジェクトアドレス：こちら✨✨
試験会場アドレス：ぜひ遊びに来てください✨✨✨
以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。また、VeVb Wulin Network をご支援いただければ幸いです。