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

FabricJS を使用して Ellipse の中央スケーリングを無効にする方法は?

王林

リリース： 2023-09-17 09:25:02

転載

1083 人が閲覧しました

如何使用 FabricJS 禁用 Ellipse 的居中缩放？

このチュートリアルでは、FabricJS を使用して Ellipse の Centered Zoom を無効にする方法を学びます。楕円形は、FabricJS が提供するさまざまな形状の 1 つです。楕円を作成するには、Fabric.Ellipse クラスのインスタンスを作成し、それをキャンバスに追加する必要があります。コントロールをスケーリングするときに、オブジェクトの変換原点として中心を使用するには、centeredScaling プロパティに値「true」を割り当てます。

構文

new fabric.Ellipse({ centeredScaling: Boolean }: Object)

ログイン後にコピー

パラメータ

オプション (オプション) - このパラメータは Object< /em> 楕円に追加のカスタマイズを提供します。このパラメーターを使用すると、色、カーソル、ストローク幅、および centeredScaling プロパティに関連するオブジェクトのその他の多くのプロパティを変更できます。

オプションキー

##centeredScaling - このプロパティは ブール値を受け取ります値値。このプロパティが True の場合、オブジェクトは中心を変換原点として使用します。

#例 1

centeredScaling をキーとして渡し、「true」値を割り当てます次の例は、

centeredScaling
プロパティが有効な場合に楕円オブジェクトがどのように動作するかを示しています。オブジェクトをズームインすると、変換の原点は楕円の中心になります。
<!DOCTYPE html> <html> <head>  <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script> </head> <body> <h2>How to disable the centered scaling of Ellipse using FabricJS?</h2> <p>Select the object and stretch it from its corners. The ellipse will scale up from its center. This is the default behavior.</p> <canvas id="canvas"></canvas> <script> // Initiate a canvas instance var canvas = new fabric.Canvas("canvas"); // Initiate an ellipse instance var ellipse = new fabric.Ellipse({ left: 215, top: 100, fill: "white", rx: 90, ry: 50, stroke: "#c154c1", strokeWidth: 5, borderColor: "#daa520", centeredScaling: true, }); // Adding it to the canvas canvas.add(ellipse); canvas.setWidth(document.body.scrollWidth); canvas.setHeight(250); </script> </body> </html>
ログイン後にコピー
例 2
centeredScaling プロパティを無効にする
「false」値を指定すると、
centeredScaling
プロパティを無効にできます。それのための。これにより、楕円の中心が変換の中心として使用されなくなります。 -
<!DOCTYPE html> <html> <head>  <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script> </head> <body> <h2>How to disable the centered scaling of Ellipse using FabricJS?</h2> <p>Select the object and stretch it from its corners. You will notice the object scales up but not from its center because we have set <b>centeredScaling</b> as False. </p> <canvas id="canvas"></canvas> <script> // Initiate a canvas instance var canvas = new fabric.Canvas("canvas"); // Initiate an ellipse instance var ellipse = new fabric.Ellipse({ left: 215, top: 100, fill: "", rx: 90, ry: 50, stroke: "#c154c1", strokeWidth: 5, borderColor: "#daa520", centeredScaling: false, }); // Adding it to the canvas canvas.add(ellipse); canvas.setWidth(document.body.scrollWidth); canvas.setHeight(250); </script> </body> </html>
ログイン後にコピー
を示すコードは次のとおりです。
以上がFabricJS を使用して Ellipse の中央スケーリングを無効にする方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。