在本文中，我們將說明如何在 FabricJS 中通過拖動來禁用對象選擇。在 FabricJS 畫布中，我們基本上可以單擊任意位置并選擇一個區域，該區域中的任何對象都會被選中。在本文中，我們將了解如何禁止這種行為
語法
new fabric.Canvas(element: HTMLElement|String, {selection: boolean}: Object)
登錄后復制
參數
元素 – 此參數是 元素本身，可以使用 document.getElementById() 或 元素本身的 id 派生。 FabricJS 畫布將在此元素上初始化
選項（可選） – 此參數是一個對象，提供額外的對我們的畫布進行定制。使用此參數，可以更改與畫布相關的顏色、光標、邊框寬度和許多其他屬性等屬性。選擇參數指示是否應啟用選擇。該鍵的默認值為 True。
示例 1
讓我們首先看看通過拖動進行選擇的效果如何就像啟用它時一樣。在此示例中，我們將選擇鍵傳遞為 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>
登錄后復制
示例 2
選擇鍵指定是否啟用或禁用通過拖動選擇畫布中的對象。如果我們將該鍵設置為 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 通過在畫布中拖動來禁用對象選擇？的詳細內容，更多請關注www.92cms.cn其它相關文章！
