ホームページ > 記事 > ウェブフロントエンド > FabricJSを使用して円の中心回転を無効にする方法は?
FabricJSを使用して円の中心回転を無効にする方法は?
- PHPz転載
- 2023-08-31 11:21:06829ブラウズ
このチュートリアルでは、FabricJS を使用して円の中心回転を無効にする方法を学びます。円は、FabricJS が提供するさまざまな形状の 1 つです。円を作成するには、Fabric.Circle クラスのインスタンスを作成し、キャンバスに追加します。デフォルトでは、FabricJS のすべてのオブジェクトは、その中心を回転ポイントとして使用します。ただし、centeredRotation プロパティを使用してこの動作を変更できます。
構文
new fabric.Circle({ centeredRotation: Boolean }: Object)パラメータ
オプション (オプション) - このパラメータは Object サークルに追加のカスタマイズを提供します。このパラメータを使用すると、色、カーソル、ストローク幅、および centeredRotation プロパティに関連するオブジェクトのその他のプロパティを変更できます。
ul>##centeredRotation - このプロパティは ブール値## を受け入れます# 値を使用すると、コントロールを通じて回転するときにオブジェクトがその変換原点を中心点として使用するかどうかを制御できます。デフォルト値は True です。
例 1
オプション キー
> FabricJS の円説明円を見てみましょうシェイプ オブジェクトのデフォルトの動作の例。
centeredRotation プロパティはデフォルトで True に設定されているため、円形オブジェクトはその中心を回転点として使用します。 <!DOCTYPE html>
<html>
<head>
<!-- Adding the Fabric JS Library-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script>
</head>
<body>
<h2>Disabling the centered rotation of circle using FabricJs</h2>
<p>Select the object and rotate it by holding its controlling corner at the top. The circle will rotate around its center. It is the default behavior. Here we have not used the <b>centeredRotation</b> property but it is by default set to True. </p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
var cir = new fabric.Circle({
left: 215,
top: 100,
fill: "white",
radius: 50,
stroke: "#c154c1",
strokeWidth: 5,
borderColor: "#daa520",
});
// Adding it to the canvas
canvas.add(cir);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>例 2
centeredRotation キーを渡すこれで、デフォルトの動作がわかりました。 ,
centeredRotationプロパティが False に指定された場合に何が起こるかを理解するために、コードを見てみましょう。 えええええ
以上がFabricJSを使用して円の中心回転を無効にする方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。