ホームページ > 記事 > ウェブフロントエンド > FabricJS キャンバスでユニファイド スケーリングを有効/無効にするカスタム キーを設定するにはどうすればよいですか?
FabricJS キャンバスでユニファイド スケーリングを有効/無効にするカスタム キーを設定するにはどうすればよいですか?
- PHPz転載
- 2023-09-07 11:57:08916ブラウズ
この記事では、FabricJS でユニファイド スケーリングを有効/無効にするカスタム キーを設定する方法を学びます。 FabricJS では、オブジェクトを隅からドラッグすると、オブジェクトは比例して変形します。これを均一スケーリングと呼びます。ただし、uniScaleKey を使用してこの動作を有効/無効にすることができます。
構文
new fabric.Canvas(element: HTMLElement|String, { uniScaleKey: String }: Object)パラメータ
element - このパラメータは 要素そのものです, 文書導出が使用できます。 getElementById() または 要素自体の ID。 FabricJS キャンバスはこの要素で初期化されます。
オプション (オプション) - このパラメータは、キャンバスに追加のカスタマイズを提供するオブジェクトです。このパラメータを使用すると、色、カーソル、境界線の幅など、キャンバスに関連する多くの属性を変更できます。uniScaleKey はその属性の 1 つです。どのキーが統合スケーリングを切り替えるかを決定する文字列値を受け入れます。デフォルト値はshiftKeyです。
例 1
値「altKey」を使用して uniScaleKey 属性を渡す
FabricJS コード例でユニファイド スケーリングを無効にするカスタマイズを見てみましょう鍵用。ここでは、uniScaleKey を「altKey」に設定します。
<!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>Setting a custom key to enable/disable uniform scaling on a canvas</h2>
<p>Hold the <b>alt</b> key and stretch the object diagonally. The object will scale non-uniformly. </p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas", {
uniformScaling: true,
uniScaleKey: "altKey"
});
// Creating an instance of the fabric.Rect class
var circle = new fabric.Circle({
left: 215,
top: 100,
radius: 50,
fill: "orange",
});
// Adding it to the canvas
canvas.add(circle);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>例 2
値「ctrlKey」を持つ uniScaleKey 属性を渡します
「ctrlKey」を渡すこともできます' 修飾キーでもあるため、uniScaleKey プロパティの値として。 uniScaleKey に NULL 値または修飾キーではないキーを指定した場合、その機能は無効になります。
この例では、uniformScaling に false の値が割り当てられています。これは、機能が無効になっていることを意味します。 ctrlKey を押すと、均一なスケーリングが再び有効になります。
えええええ以上がFabricJS キャンバスでユニファイド スケーリングを有効/無効にするカスタム キーを設定するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。