ベジェ曲線について_html/css_WEB-ITnose

ベジェ曲線は曲率を代表するもので、コンピューター グラフィックス、フォント、アニメーションなどの多くのアプリケーションで使用されます。以前に CSS を使用したことがある場合は、おそらくベジェ曲線に遭遇したことがあるでしょう。たとえば、CSS タイミング関数にはベジェ曲線があり、X 軸と Y 軸の間の距離が時間を決定するために使用されます。

それらを使用する理由

私たちの観点からは、100 ピクセルを消費する可能性がある曲線を描く必要があります。このような曲線を描くのに非常に便利です。残念ながら、このような曲線を描く理由は数多くありますが、最も明白なのはストレージのオーバーヘッドが非常に高いことです。

関数を 100 回呼び出して、毎回 1 ポイントを収集できたらどうなるでしょうか。この目的のために、関数を作成できます:

/** * @param {Number} t Number from 0 to 1. * @return {Array} Point on the curve */function getCurveLocation(t) { ... }

この関数には 0 から 1 までの数値が必要です。これは主に 100 個の点を描画する必要があるためです。この関数を getCurveLocation と呼び、その値空間は 100 倍になります。

うわー

これですべてが完了しました。この設定は、任意のピクセル位置でのカーブを表します。それは簡単です。画面にレンダリングする前にループ数を増減して必要なピクセル数を取得するだけです。

定義

getCurveLocation はどのように定義されますか?そこでベジェ曲線が登場します。一般に次のように定義されます:

この式を分解してみましょう。これは、最初にそれを達成するための単なる方法です。この式のすべての部分を理解していなくても問題ありません。後で例を使用してすべてを結び付けます。

B は、数値パラメーター t を受け取る関数で、その値は 0 から 1 であり、曲線上の各点を返します。

n はベジェ曲線の次数を表し、角度が大きいほど、曲線の形状はより複雑になります。ほとんどの場合、必要なのは 2 次平方と 3 次 3 です。 i は 0 から始まる整数で、ループごとに増分されます。

は二項係数を表します。 (x+y)^n のような二次項を展開すると。ここで近道をすることができます。 n=3 や i=2 などの 2 次項であるかどうかに関係なく、この組み合わせによってこの式を迅速に評価できます。

は、多項式の特定の項を表します。 PI は制御点の 1 つです。

知識ポイント

次の例から始めて、ベジェ曲線を作成しましょう:

var points = []for(var i = 0; i <= 100; i++) {    points.push(getCurveLocation(i * .01))}

これには 4 つの点があり、このベジェ曲線には 3 つの点があり、4 つのループ ポイントと、各サイクル ポイントの結果があるためです。は次のとおりです:

ループ 1:

ループ 2:

ループ 3:

ループ 4:

最終的な多項式:

対応する方程式をプロットしてみましょうP の変数を介して:

この曲線はあまり役に立たないと思うかもしれませんが、0 から 1 までのこの領域は非常に意味があります:

これには見覚えがあるはずです。はい、最初に使用したベジェ曲線です。記事の。 0 から 1 までの領域は、これら 2 つの値ですべての興味深いことが起こるため、非常に重要です。まず t=0 での多項式を見てみましょう:

次に、t=1 での多項式を見てみましょう:

最後の点が得られます。最初と最後の点がどこにあるかに関係なく、t=0 は常に最初の点を返し、t=1 は常に最後の点を返します。これは非常に強力で、多項式がどれほど複雑であっても、パスの開始点と終了点を簡単に分析できます。 t の他の値はキャンセルされません。たとえば、ここで 2 番目の点 P1 を変更して、さまざまな曲線パスを取得できます。

P1 が増加すると、曲線は上向きに曲がりますが、その速度はますます遅くなります。これは、P1 の値を変更することで実証できます。そして、それをすべて数式で説明できます。

t=.25 で曲線がどの程度曲がっているかを見てみましょう:

明らかに、P1 は P2 よりも発言権を持っています。次に、t=.75 の効果を見てみましょう:

これで、P2 が高くなり、逆転が達成されました。したがって、t が増加するたびに、一意の制御点が存在します。

この記事では 3 次ベジェ曲線が例として使用されており、他のベジェ曲線にも直感的に適用できます。たとえば、ベジェ曲線には 3 つの点があり、その 2 つの点の終端に制御点が生成されます。

曲線は制御点 P1 に従って変化します。 P1とエンドエンドが同一直線上にあると直線が得られます。これは、共通の線形効果を得るためです。この現象は研究する価値があります。同時に、この記事から何らかの洞察を得ていただければ幸いです。単純な入力 0 から 1 から、対応する曲線を取得できます。

多読

• CSS タイミング関数を理解する
• Easing Functions (aka Timing Functions) in CSS3

この記事は @Shawn O'Mara の "Mathematical Intuition Behind Bezier Curves" に基づいて翻訳されており、翻訳全体には私たち自身の理解と考えが含まれています。翻訳が良くない場合や間違いがある場合は、同僚に指摘してもらってください。この翻訳を転載したい場合は、英語の出典を明記してください: https://buildingvts.com/mathematical-intuition-behind-bezier-curves-2ea4e9645681#.k6pdvyhgc。

Da Mo

通称「Da Mo」、W3CPlus の創設者で、現在はモバイル タオバオで働いています。彼は HTML5、CSS3、Sass などのフロントエンド スクリプト言語について非常に深い理解と豊富な実践経験を持っており、特に CSS3 の研究に注力しており、中国で最初に研究と使用を行った人物の 1 人です。 CSS3テクノロジー。 CSS3、Sass、Drupalの中国人エバンジェリスト。 2014 年に『図解 CSS3: コア技術と事例実践』を出版しました。