FabricJS を使用して、キャンバスの現在のビューポートの中央に Image オブジェクトを配置するにはどうすればよいですか?

このチュートリアルでは、画像オブジェクトを現在のビューポートの中央に配置する方法を学習します。 FabricJSを使用してキャンバスを描画します。インスタンスを作成することで Image オブジェクトを作成できます ファブリック.イメージ。 FabricJS の基本要素の 1 つであるため、次のことも簡単に行うことができます。 角度、不透明度などのプロパティを適用してカスタマイズします。画像を中央に配置するには キャンバスの現在のビューポート上のオブジェクトの場合は、viewportCenter メソッドを使用します。

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

画像オブジェクトのデフォルトの外観

＃＃＃例＃＃＃

viewportCenter

の場合に何が起こるかをコード例で見てみましょう。 メソッドは使用されません。この場合、画像オブジェクトはキャンバスの中央に配置されません。

リーリー

viewportCenter

メソッドの使用 ＃＃＃例＃＃＃ 画像オブジェクトがどこにあるかを確認するコード例を見てみましょう

viewportCenter

メソッドを使用します。この場合、画像オブジェクトは次のようになります。 垂直方向と水平方向は両方とも、キャンバスの現在のビューポートを基準としています。 リーリー ＃＃＃結論は＃＃＃ このチュートリアルでは、2 つの例を使用して、中央揃えまたは中央揃えの方法を示します。 FabricJS キャンバス上の現在のビューポートを使用します。

以上がFabricJS を使用して、キャンバスの現在のビューポートの中央に Image オブジェクトを配置するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。