FabricJS を使用してテキスト変換の垂直原点を設定するにはどうすればよいですか?

このチュートリアルでは、FabricJS を使用してテキスト変換の垂直原点を設定する方法を学びます。 Fabric.Text のインスタンスを追加することで、キャンバスにテキストを表示できます。テキストの移動、拡大縮小、寸法の変更ができるだけでなく、テキストの配置、テキストの装飾、行の高さなどの追加機能も提供します。これらの機能は、それぞれ textAlign、underline、lineHeight プロパティを通じて利用できます。同様に、originY 属性を使用して、変換の垂直原点を設定することもできます。

パラメータ

• text

  - このパラメータは、表示するテキスト文字列である String を受け入れます。

• オプション (オプション)

  - このパラメータは、テキストに追加のカスタマイズを提供する オブジェクト です。このパラメータを使用すると、originY が属性であるオブジェクトに関連付けられた色、カーソル、境界線の幅、およびその他の多くのプロパティを変更できます。

オプションキー

• originY

  - このプロパティは、変換の垂直原点を設定できる String 値を受け入れます。可能な値は「上」、「下」、「中央」です。デフォルト値は「トップ」です。

例 1

originY 属性を使用しない場合のテキスト オブジェクトがどのように見えるかをコード例で見てみましょう。この場合、変換の垂直方向の原点は上になります。これはデフォルトでもあります。

例 2

この例では、originY プロパティに値を割り当てることで、変換の垂直方向の原点がどのように変更されるかを見ていきます。この例では、違いを示すために 2 つのテキスト オブジェクトを使用します。最初のテキスト オブジェクトでは、値を「bottom」として渡したため、変換の垂直方向の原点は下部になります。同じ最上位属性 100 が両方のテキストに適用されますが、変換の垂直原点が変更されるため、依然として異なる垂直位置にあります。

以上がFabricJS を使用してテキスト変換の垂直原点を設定するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。