Canvas は高次ベジェ曲線を実装します

この記事では主にcanvasでの高次ベジェ曲線(N次ベジェ曲線ジェネレーター)の実装を紹介しますが、とても良いと思ったので参考にさせていただきます。編集者をフォローして見てみましょう。皆さんのお役に立てれば幸いです。

最初に書いてください

ネイティブ Canvas は 3 次のベジェ曲線までしかサポートしていないため、複数のコントロール ポイントを追加したい場合はどうすればよいですか? （3次ベジェであれば、最も複雑な曲線もシミュレートできます。）同時に、ベジェ制御点の位置については、どの程度制御点を設定すれば希望する曲線を形成するのかを直感的に知ることは困難です。 。上記の 2 つの問題点を解決するための N レベルのソリューション (js バージョン) がコミュニティにないようです。そこで、今回は著者がオープンソースの bezierMaker.js について真剣に考えています。

bezierMaker.js は理論的には N 次ベジェ曲線の生成をサポートしており、開発者がコントロール ポイントを追加およびドラッグして最終的に描画アニメーションのセットを生成するためのテスト環境も提供します。開発者にとって、さまざまな位置の制御点に対応するさまざまな生成曲線を知ることは非常に直感的です。

この作品が気に入ったら、スターへようこそ。結局のところ、スターは苦労して獲得するものです。 。

プロジェクトアドレス: こちら✨✨✨

なぜテストサイトが必要なのでしょうか?

複雑な高次ベジェ曲線を描画する場合、必要な曲線の制御点の正確な位置を知ることはできません。テストフィールドでシミュレーションすることで、リアルタイムに制御点の座標値を取得でき、取得した点座標をオブジェクト配列に変換してBezierMakerクラスに渡してターゲット曲線を生成できます

。 [x] テストフィールドには任意の数のコントロールポイントを追加できます

[x] テストフィールドは曲線描画アニメーションの表示をサポートしています

[x] コントロールポイントは自由にドラッグできます

1. [ x ] ベジェ曲線形成過程の接線表示をサポート

2. [x] 3次以下のベジェ曲線の描画はネイティブAPIを採用

3. 導入

4. <script src="./bezierMaker.js"></script>

5. drawing

上のレンダリングは、テスト サイトの使用法を示しています。テスト サイトを通じてコン​​トロール ポイントの正確な座標を取得した後、bezierMaker.js を呼び出して曲線を直接描画できます。

/**
 * canvas canvas的dom对象
 * bezierCtrlNodesArr 控制点数组，包含x，y坐标
 * color 曲线颜色
 */
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 = new BezierMaker(canvas, arr0, 'black')
var bezier1 = new BezierMaker(canvas, arr1, 'red')
var bezier2 = new BezierMaker(canvas, arr2, 'blue')
var bezier3 = new BezierMaker(canvas, arr3, 'yellow')
var bezier4 = new 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(function(item, index) {
        if(!index) {
            x += item.x * Math.pow(( 1 - t ), n - index) * Math.pow(t, index) 
            y += item.y * Math.pow(( 1 - t ), n - index) * Math.pow(t, index) 
        } else {
        //factorial为阶乘函数
            x += self.factorial(n) / self.factorial(index) / self.factorial(n - index) * item.x * Math.pow(( 1 - t ), n - index) * Math.pow(t, index) 
            y += self.factorial(n) / self.factorial(index) / self.factorial(n - index) * item.y * Math.pow(( 1 - t ), n - index) * Math.pow(t, index) 
        }
    })
    return {
        x: x,
        y: y
    }
}

すべての点をトラバースし、現在の比率 t (0
ベッセル公式の導出については、後の記事で具体的に説明します。ここでは、ベッセル公式を使用して、実際のベジェ曲線が 1000 個の点に分割され、各点が直線で結ばれることを理解するだけで済みます。点では、クラス曲線をシミュレートできます。

シミュレーションフィールドのベジェ曲線生成アニメーションの実装については
関連コードのこの部分はここで参照できます

全体的なアイデアは、再帰的手法を使用して制御点の各層を一次ベッセル関数として扱うことです次のレイヤ コントロール ポイントと対応する接続​​を計算します。著者は、テストサイトのアニメーション生成原理を整理するために、ベジェ曲線の公式原理の詳細な説明まで具体的なロジックを残しておきます~

関連する推奨事項:

CSSを使用してベジェ曲線を作成する

ベジェ曲線アプリケーションの詳細な説明

キャンバスベジェ曲線効果を実装するためのコードデモ

以上がCanvas は高次ベジェ曲線を実装しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。