在本文中，我們將說明如何在 FabricJS 中透過拖曳來停用物件選擇。在 FabricJS 畫布中，我們基本上可以單擊任意位置並選擇一個區域，該區域中的任何物件都會被選取。在本文中，我們將了解如何禁止這種行為
new fabric.Canvas(element: HTMLElement|String, {selection: boolean}: Object)元素 - 此參數是
#選項（可選）# - 此參數是一個對象，提供額外的對我們的畫布進行客製化。使用此參數，可以變更與畫布相關的顏色、遊標、邊框寬度和許多其他屬性等屬性。選擇參數指示是否應啟用選擇。該鍵的預設值為 True。
讓我們先看看透過拖曳進行選擇的效果如何就像啟用它時一樣。在此範例中，我們將選擇鍵傳遞為 True，這也是預設值。讓我們看看啟用選擇後畫布的行為如何。
<!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 selection of objects on a canvas</h2>
<p>Here you can select the object as the selection key is True</p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas", {
selection: true
});
// Creating an instance of the fabric.Circle class
var cir = new fabric.Circle({
radius: 40,
fill: "#87a96b",
left: 30,
top: 20,
});
// Adding it to the canvas
canvas.add(cir);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>選擇鍵指定是否啟用或停用透過拖曳選擇畫布中的物件。如果我們將該鍵設為 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 selection of objects on a canvas</h2>
<p> Here you cannot select an area around the object as the selection key is set to False.</p>
<canvas id="canvas"></canvas>
<script>
//Initiate a canvas instance
var canvas = new fabric.Canvas("canvas", {
selection: false
});
//creating an instance of the fabric.Circle class
var cir = new fabric.Circle({
radius: 40,
fill: "#87a96b",
left: 30,
top: 20,
});
//adding it to the canvas
canvas.add(cir);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>現在我們已將選擇設為 False，我們無法再選擇物件周圍的部分來拖曳它。不過，我們仍然可以手動點擊並選擇物件。
以上是如何使用 FabricJS 透過在畫布中拖曳來停用物件選擇？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
