FabricJS を使用してキャンバス上で中央のスケーリングを有効にする方法は?-jsチュートリアル-php.cn

FabricJS を使用してキャンバス上で中央のスケーリングを有効にする方法は?

王林

リリース： 2023-08-29 13:29:02

転載

912 人が閲覧しました

如何使用 FabricJS 在画布上启用居中缩放？

この記事では、FabricJS を使用してキャンバス上で中央のスケーリングを有効にする方法を学びます。 FabricJS では、オブジェクトを隅からドラッグすると、オブジェクトは比例して変形します。 centeredScaling プロパティを使用すると、中心を変換の原点として使用できます。

構文

new fabric.Canvas(element: HTMLElement|String, { centeredScaling: Boolean }: Object)

ログイン後にコピー

パラメータ

要素 - このパラメータは
オプション (オプション) - このパラメータは、キャンバスの追加のカスタマイズを提供するオブジェクトです。このパラメータを使用すると、色、カーソル、境界線の幅など、キャンバスに関連する多くの属性を変更できます。その属性の 1 つに、centeredScaling があります。オブジェクトが中心点を変換の原点として使用するかどうかを決定するブール値を受け入れます。デフォルト値は False です。

例 1

centeredScaling キーを false の値で渡す

コード例を見て、どのような状況にあるのかを理解しましょう。 centerScaling が設定されます。False の場合、オブジェクトのスケーリング方法が設定されます。
<!DOCTYPE html> <html> <head>  <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script> </head> <body> <h2>Enabling centered scaling in canvas using FabricJS</h2> <p>Select the object and try to resize it by its corners. The object will scale non-uniformly from its center.</p> <canvas id="canvas"></canvas> <script> // Initiate a canvas instance var canvas = new fabric.Canvas("canvas", { centeredScaling: false }); // Creating an instance of the fabric.Rect class var circle = new fabric.Circle({ left: 200, top: 100, radius: 40, fill: "blue", }); // Adding it to the canvas canvas.add(circle); canvas.setWidth(document.body.scrollWidth); canvas.setHeight(250); </script> </body> </html>
ログイン後にコピー
例 2
centeredScaling キーを True の値を持つクラスに渡す

デフォルトでは、centeredScaling
キーは false に設定されます。したがって、オブジェクトがその中心を変換の起点として使用できるように、キーをクラスに渡し、実際の値を与える必要があります。えええええ###
以上がFabricJS を使用してキャンバス上で中央のスケーリングを有効にする方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。