FabricJS を使用してテキスト内の 1 文字のベースラインを移動するにはどうすればよいですか?

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

＃＃＃文法＃＃＃ リーリー

パラメータ

• text

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

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

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

オプションキー

• styles

  - このプロパティは、個々の文字にスタイルを追加できる Object 値を受け入れます。

• deltaY

  - このプロパティは、スタイルのベースラインのみを移動できる Number 値を受け入れます。

例 1

スタイル属性のみをキーとして渡します

この例では、styles 属性を使用して文字に個別のスタイルを追加する方法を示します。この例でわかるように、0 番目の文字のみ fontSize が 55、fontWeight が太字、fontStyle が「oblique」になっています。第 1 レベルの属性は行番号、第 2 レベルの属性は文字記号です。ここでは、最初の行と最初の文字を表すために 0 を使用します。

リーリー

例 2

deltaY 属性とともに、styles 属性をキーとして渡します

この例では、deltaY プロパティを使用して文字にさまざまなベースラインを追加する方法を見ていきます。この場合、deltaY が指定されているため、最初の行の 2 番目の数値 (最初のインデックス) は、隣接する文字とは異なるベースラインを持ちます。

ああああ

以上がFabricJS を使用してテキスト内の 1 文字のベースラインを移動するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。