svg二次ビジエ曲線：滑らかなエッジを描くためのツール

この記事では、HTML5 SVGの二次ビジエ曲線を使用して滑らかなエッジを描畫する方法について説明します。二次ビジエ曲線は、SVGパス

屬性のd命令によって定義され、開始點(diǎn)とエンドポイントがあり、曲線は単一の制御ポイントを通して曲がっています。 Q

キーポイント：

>命令は、3つの座標(biāo)を含む二次ビジエ曲線を定義するために使用されます。 d Q小文字を使用して相対座標(biāo)を指定しますが、

および

命令を使用して、システムは以前の曲線に基づいて自動(dòng)的にコントロールポイントを推測(cè)します。曲線。 q T二次ビジエ曲線をエンコードおよび視覚化することは困難な場(chǎng)合がありますが、ツールを使用してコードを生成できます。 t

quadriftourous bezier曲線は、複雑な形狀を作成するために使用でき、

要素、CSSアニメーション、またはJavaScriptを介してアニメーション化できます。 <path></path>

以前の記事「SVGで複雑なパスを作成する方法」では、<animate></animate>要素を調(diào)査し、一連のラインセグメントとアークを描畫して、任意の形狀を作成する方法を示します（フォントをダウンロードせずにフォントをコピーすることがよくあります）。 。

プロパティは、滑らかな曲線を描くためのいくつかの追加のトリックを提供します。この記事では、2次bezier曲線について説明します。また、より複雑なオプションについては、「SVG畫像にCubic Bezier曲線を描く方法」を參照することもできます。

<path></path>二次ビジエ曲線とは何ですか？ d

二次皮肉の曲線には、出発點(diǎn)（P0）とエンドポイント（P2）があります。単一の制御點(diǎn)（P1）がラインの曲率を決定します。ウィキペディアのbezier曲線ページは、優(yōu)れた生成されたイラストを提供します：

寫真はウィキペディアからのものです

數(shù)學(xué)愛(ài)好家は、Wolfram Mathworldで頭痛を誘発する方程式を見(jiàn)ることもできます。 四辺形曲線は、滑らかなエッジを描くのに最適です。下の図からわかるように、コントロールポイントを簡(jiǎn)単に指定でき、通常は右角のエッジが表示されます。

複雑なパス

二次ビジエ曲線は、svgパスの

屬性の命令定義を使用します：

初期dコマンドは、ペンを最初のポイント（100,250）に移動(dòng)します。 Qの後には、単一の制御ポイント（250,100）と最終的な描畫ポイント（400,250）の2つの座標(biāo)が続きます。

<path d="M100,250 Q250,100 400,250" />

小文字の文字を使用して、絶対座標(biāo)の代わりに相対座標(biāo)を表すこともできます。次の曲線は同じで、エンコードしやすい場(chǎng)合があります。

<path d="M100,250 Q250,100 400,250" />

最後に、略語(yǔ)Tおよびt命令があります（通常、下位文字は絶対座標(biāo)ではなく相対座標(biāo)を表します）。これらの命令は、複數(shù)の曲線を一緒に接続するために、さらに終了座標(biāo)を受け入れます。制御ポイントは、完全な滑らかな連続曲線を確保するために、最後の使用點(diǎn)から推測(cè)されます。たとえば、次のパスを検討してください

<path d="M100,250 q150,-150 300,0" />

100,250から400,250に曲線を引き、コントロールポイントは250,100です。次に、別の曲線が描畫され、700,250で終わり、制御點(diǎn)は550,400に推測(cè)されます。

推定された制御ポイントは數(shù)學(xué)的に正しいですが、必ずしも必要なものではない場(chǎng)合があります。

二次ビジエ曲線をエンコードして視覚化するのは少し難しい場(chǎng)合があるため、クイック生成ツールを使用して

コードを生成できます。 <path></path>

codepen link

曲線の両端でコントロールポイントをドラッグします。曲線自體をクリックして、塗りつぶし効果を切り替えます。これにより、

コマンドが追加されます。

Zこのツールは、すべての畫面サイズで適切に機(jī)能するように、DOMページ座標(biāo)をSVG座標(biāo)に変換する必要があることに注意してください。これは予想よりも少し複雑かもしれないので、詳細(xì)については「DOM座標(biāo)からSVG座標(biāo)に変換してSVG座標(biāo)に変換し、返す方法」を參照してください。

より複雑な問(wèn)題に対処する準(zhǔn)備ができている場(chǎng)合は、SVG畫像に立方體のベジエ曲線を作成してみてください。

（元のテキストに記載されているFAQパーツはここに追加する必要があります。コンテンツは元のテキストに記載されており、ここでは繰り返されません）

以上がHTML5 SVGSで二次ベジエ曲線を描く方法の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。