ホームページ >ウェブフロントエンド >jsチュートリアル >FabricJS を使用してキャンバス上で中央のスケーリングを有効にする方法は?
FabricJS を使用してキャンバス上で中央のスケーリングを有効にする方法は?
- 王林転載
- 2023-08-29 13:29:02970ブラウズ
この記事では、FabricJS を使用してキャンバス上で中央のスケーリングを有効にする方法を学びます。 FabricJS では、オブジェクトを隅からドラッグすると、オブジェクトは比例して変形します。 centeredScaling プロパティを使用すると、中心を変換の原点として使用できます。
構文
new fabric.Canvas(element: HTMLElement|String, { centeredScaling: Boolean }: Object)パラメータ
要素 - このパラメータは
オプション (オプション) - このパラメータは、キャンバスの追加のカスタマイズを提供するオブジェクトです。このパラメータを使用すると、色、カーソル、境界線の幅など、キャンバスに関連する多くの属性を変更できます。その属性の 1 つに、centeredScaling があります。オブジェクトが中心点を変換の原点として使用するかどうかを決定するブール値を受け入れます。デフォルト値は False です。
例 1
centeredScaling キーを false の値で渡す
コード例を見て、どのような状況にあるのかを理解しましょう。 centerScaling が設定されます。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>Enabling centered scaling in canvas using FabricJS</h2>
<p>Select the object and try to resize it by its corners. The object will scale non-uniformly from its center.</p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas", {
centeredScaling: false
});
// Creating an instance of the fabric.Rect class
var circle = new fabric.Circle({
left: 200,
top: 100,
radius: 40,
fill: "blue",
});
// Adding it to the canvas
canvas.add(circle);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>
例 2centeredScaling キーを True の値を持つクラスに渡す
デフォルトでは、centeredScaling
キーは false に設定されます。したがって、オブジェクトがその中心を変換の起点として使用できるように、キーをクラスに渡し、実際の値を与える必要があります。 えええええ###以上がFabricJS を使用してキャンバス上で中央のスケーリングを有効にする方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事はtutorialspoint.comで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。