ホームページ >ウェブフロントエンド >jsチュートリアル >FabricJS を使用して長方形の中央揃えのスケーリングを無効にする方法は?
FabricJS を使用して長方形の中央揃えのスケーリングを無効にする方法は?
- WBOY転載
- 2023-08-24 20:53:071243ブラウズ
このチュートリアルでは、FabricJS を使用して長方形の中央揃えのスケーリングを無効にする方法を学びます。 Rectangle は、FabricJS が提供するさまざまな形状の 1 つです。四角形を作成するには、fabric.Rect クラスのインスタンスを作成し、キャンバスに追加する必要があります。コントローラーを介してスケーリングする場合、centeredScaling プロパティを true に設定して、オブジェクトの変換の開始点として中心を使用します。
Syntax
new fabric.Rect({ centeredScaling: Boolean }: Object)Parameters
Options (optional) - このパラメータは Object です。四角形に追加のカスタマイズを提供します。このパラメータを使用すると、色、カーソル、ストロークの幅、その他の多くのプロパティなどのプロパティを、centeredScaling がプロパティであるオブジェクトに関連して変更できます。 ##Options Keys
- - このプロパティは、
- Boolean
値を受け入れます。このプロパティが true の場合、オブジェクトは中心をその中心として使用します。変換の起点。例 1
centeredScaling
をキーとして渡し、それに「true」値を代入しますcenteredScaling プロパティが有効になっているときに四角形オブジェクトがどのように動作するかをコード例で見てみましょう。オブジェクトを拡大すると、変換の原点は四角形の中心になります。
<!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>Passing centeredScaling as key and assigning a "true" value to it</h2>
<p>Try scaling the rectangle to see that centered scaling has been enabled</p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
// Initiate a rectangle object
var rect = new fabric.Rect({
left: 125,
top: 90,
width: 170,
height: 70,
fill: "#cf1020",
borderColor: "black",
borderScaleFactor: 3,
centeredScaling: true,
});
// Add it to the canvas
canvas.add(rect);
</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 centeredScaling property</h2>
<p>Try scaling the rectangle to see that centered scaling has been disabled</p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
// Initiate a rectangle object
var rect = new fabric.Rect({
left: 125,
top: 90,
width: 170,
height: 70,
fill: "#cf1020",
borderColor: "black",
borderScaleFactor: 3,
centeredScaling: false,
});
// Add it to the canvas
canvas.add(rect);
</script>
</body>
</html>以上がFabricJS を使用して長方形の中央揃えのスケーリングを無効にする方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。