HTML5 SVGSで二次ベジエ曲線を描く方法

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

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

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

キーポイント：

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

および

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

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

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

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

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

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

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

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

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

複雑なパス

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

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

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

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

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

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

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

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

100,250から400,250に曲線を引き、コントロールポイントは250,100です。次に、別の曲線が描画され、700,250で終わり、制御点は550,400に推測されます。

推定された制御ポイントは数学的に正しいですが、必ずしも必要なものではない場合があります。

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

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

codepen link

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

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

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

より複雑な問題に対処する準備ができている場合は、SVG画像に立方体のベジエ曲線を作成してみてください。

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

以上がHTML5 SVGSで二次ベジエ曲線を描く方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。