ホームページ > 記事 > ウェブフロントエンド > FabricJS を使用して Circle の中央スケーリングを無効にする方法は?
FabricJS を使用して Circle の中央スケーリングを無効にする方法は?
- WBOY転載
- 2023-09-07 17:13:021374ブラウズ
このチュートリアルでは、FabricJS を使用してCircle の中央スケーリングを無効にする方法を学びます。円は、FabricJS が提供するさまざまな形状の 1 つです。サークルを作成するには、Fabric.Circle クラスのインスタンスを作成し、キャンバスに追加する必要があります。コントロールをスケーリングするときは、オブジェクトの変換原点として中心を使用して、centeredScaling プロパティに true 値を割り当てます。
構文
new fabric.Circle({ centeredScaling: Boolean }: Object)パラメータ
オプション (オプション) - このパラメータは追加で提供されます。カスタム オブジェクトをサークルに追加します。このパラメータを使用すると、色、カーソル、ストローク幅、および centeredScaling プロパティ
# オプション キー
## に関連するオブジェクトのその他のプロパティを変更できます。#centeredScaling - このプロパティは boolean 値を受け入れます。このプロパティが 强>True の場合、オブジェクトは中心を変換原点として使用します。
#例 1
centeredScaling をキーとして渡し、「true」値を割り当てます
centeredScalingem> プロパティが有効な場合に円形オブジェクトがどのように動作するかをコードのスニペットで見てみましょう。オブジェクトをズームインすると、変換の原点は円の中心になります。
<!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 scaling of circle using FabricJs</h2>
<p>Select the object and stretch it by holding one of its controlling corners. You will notice the circle scales up uniformly from its center. This is the default behavior. Here we have not used the <b>centeredScaling</b> property but by default, it is 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",
centeredScaling: true
});
// Adding it to the canvas
canvas.add(cir);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>例 2
centeredScaling プロパティの無効化centeredScaling
プロパティに false の値を指定すると、このプロパティを無効にできます。 。これにより、円は、円の中心を変換の中心として使用しなくなります。これを実証するコードは次のとおりです<!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 scaling of circle using FabricJs</h2>
<p>Select the object and stretch it by holding one of its controlling corners. You will notice that the circle is no longer scaling up uniformly from its center. Here we have used the <b>centeredScaling</b> property and set it False. </p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
var circle = new fabric.Circle({
left: 215,
top: 100,
fill: "",
radius: 50,
stroke: "#c154c1",
strokeWidth: 5,
borderColor: "#daa520",
centeredScaling: false
});
// Adding it to the canvas
canvas.add(circle);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>
以上がFabricJS を使用して Circle の中央スケーリングを無効にする方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。