首頁 > 文章 > web前端 > 如何使用 FabricJS 透過在畫布中拖曳來停用物件選擇？

如何使用 FabricJS 透過在畫布中拖曳來停用物件選擇？

PHPz轉載: 2023-09-13 23:09:08907瀏覽

如何使用 FabricJS 通过在画布中拖动来禁用对象选择？

在本文中，我們將說明如何在 FabricJS 中透過拖曳來停用物件選擇。在 FabricJS 畫布中，我們基本上可以單擊任意位置並選擇一個區域，該區域中的任何物件都會被選取。在本文中，我們將了解如何禁止這種行為

語法

new fabric.Canvas(element: HTMLElement|String, {selection: boolean}: Object)

參數

元素 - 此參數是
#選項（可選）# - 此參數是一個對象，提供額外的對我們的畫布進行客製化。使用此參數，可以變更與畫布相關的顏色、遊標、邊框寬度和許多其他屬性等屬性。選擇參數指示是否應啟用選擇。該鍵的預設值為 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 透過在畫布中拖曳來停用物件選擇？的詳細內容。更多資訊請關注PHP中文網其他相關文章！

对象

陳述：

本文轉載於：tutorialspoint.com。如有侵權，請聯絡admin@php.cn刪除

上一篇：在 JavaScript 解釋 Promise.any() 和 async-await ？下一篇：在 JavaScript 解釋 Promise.any() 和 async-await ？

看更多