ホームページ > 記事 > ウェブフロントエンド > FabricJS を使用してキャンバスの統合スケーリングを無効にする方法は?
FabricJS を使用してキャンバスの統合スケーリングを無効にする方法は?
- WBOY転載
- 2023-09-03 20:57:08871ブラウズ
この記事では、FabricJS を使用してキャンバスの統合スケーリングを無効にする方法を学びます。 FabricJS では、オブジェクトを隅からドラッグすると、オブジェクトは比例して変形します。ただし、uniformScaling 属性を使用してこの動作を無効にすることができます。
構文
new fabric.Canvas(element: HTMLElement|String, { uniformScaling: Boolean }: Object)パラメータ
##要素 - このパラメータは 要素そのものです。
オプション (オプション) - このパラメータは、キャンバスの追加のカスタマイズを提供するオブジェクトです。このパラメーターを使用すると、色、カーソル、境界線の幅、その他の多くのプロパティなどのキャンバス関連のプロパティを変更できます。そのうちの uniformScaling はプロパティです。オブジェクトを比例的に拡大縮小するかどうかを決定するブール値を受け入れます。デフォルト値は True です。
uniformScaling が に設定されている場合にオブジェクトがどのように動作するかを見てみましょう。 False 、スケーリングは不均一です。 FabricJS バージョン 4 以降、プロパティ uniScaleTransform は削除され、uniformScaling に置き換えられました。
<!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>
<div style="padding: 10px; font-weight: bold; margin-left: 32px">
How to disable uniform scaling in canvas using FabricJS?
</div>
<canvas
id="canvas"
width="500"
height="300"
style="border: 2px solid #000000">
</canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas", {
// UniformScaling is disabled
uniformScaling: false
});
// Creating an instance of the fabric.Rect class
var circle = new fabric.Circle({
left: 70,
top: 90,
radius: 40,
fill: "#006400",
});
// Adding it to the canvas
canvas.add(circle);
</script>
</body>
</html>出力
.gif)
<!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>
<div style="padding: 10px; font-weight: bold; margin-left: 32px">
How to disable uniform scaling in canvas using FabricJS?
</div>
<canvas
id="canvas"
width="500"
height="300"
style="border: 2px solid #000000">
</canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas", {
// UniformScaling is enabled
uniformScaling: true
});
// Creating an instance of the fabric.Rect class
var circle = new fabric.Circle({
left: 70,
top: 90,
radius: 40,
fill: "#006400",
});
// Adding it to the canvas
canvas.add(circle);
</script>
</body>
</html>output
.gif)
以上がFabricJS を使用してキャンバスの統合スケーリングを無効にする方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事はtutorialspoint.comで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。