ホームページ >ウェブフロントエンド >jsチュートリアル >FabricJS を使用してキャンバスの対話性を無効にするにはどうすればよいですか?
FabricJS を使用してキャンバスの対話性を無効にするにはどうすればよいですか?
- WBOY転載
- 2023-09-02 15:33:131495ブラウズ
この記事では、FabricJS でキャンバスの対話性を無効にする方法を学びます。各オブジェクトの上部にあるインタラクション レイヤーは、FabricJS のユニークな機能の 1 つです。キャンバスを初期化すると、オブジェクトを選択したり、ドラッグしたり、グループ選択を操作したりできるようになります。ただし、インタラクション プロパティを False に指定すると、これらすべてを元に戻すことができます。
構文
new fabric.Canvas(element: HTMLElement|String, { interactive : Boolean }: Object)パラメータ
要素 - このパラメータは
オプション (オプション) - このパラメータは、キャンバスの追加のカスタマイズを提供するオブジェクトです。このパラメータを使用すると、色、カーソル、境界線の幅、その他多くのプロパティなど、キャンバスに関連するプロパティを変更できます。その中で、Interactive は、インタラクティブなキャンバスが必要かどうかを決定できるプロパティです。このプロパティのデフォルト値は True です。
例 1
インタラクティブなプロパティが有効な場合
インタラクティブなプロパティを有効にすると、オブジェクトを自由にドラッグして選択できるようになります。必要に応じて操作してください。以下のコード例で確認できます。 -
<!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 interactivity of canvas</h2>
<p>Here you can drag the object and manipulate them freely as we have set the <b>interactive</b> property to True. </p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas", {
interactive: true,
});
// Creating an instance of the fabric.Rect class
var obj1 = new fabric.Rect({
left: 170,
top: 90,
width: 60,
height: 80,
fill: "#966fd6",
angle: 90,
});
var obj2 = new fabric.Rect({
left: 200,
top: 120,
width: 60,
height: 80,
fill: "#ffa343",
angle: 56,
});
// Adding it to the canvas
canvas.add(obj1);
canvas.add(obj2);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>例 2
インタラクション キーをクラスに渡す
コード例を見て、その方法を学びましょう。キャンバスの対話性を無効にします。インタラクション プロパティに False 値を割り当てると、キャンバス内のオブジェクトの上部にあるインタラクション レイヤーが削除されます。
えええええ以上がFabricJS を使用してキャンバスの対話性を無効にするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。