首頁 > 文章 > web前端 > 如何使用 FabricJS 使多邊形物件對滑鼠事件做出反應？

如何使用 FabricJS 使多邊形物件對滑鼠事件做出反應？

WBOY轉載: 2023-08-31 14:37:08658瀏覽

如何使用 FabricJS 使多边形对象对鼠标事件做出反应？

我們可以透過建立fabric.Polygon的實例來建立一個Polygon物件。多邊形物件的特徵可以是由一組連接的直線段組成的任何閉合形狀。由於它是 FabricJS 的基本元素之一，因此我們也可以透過應用角度、不透明度等屬性輕鬆自訂它。我們使用 mouseup 和 mousedown 事件來示範如何多邊形物件對使用者觸發的滑鼠事件做出反應。

文法

polygon.on(“mouseup”, callbackFunction);
polygon.on(“mousedown”, callbackFunction);

範例 1：顯示物件如何回應 mouseup 事件

讓我們看一個程式碼範例，了解觸發 mouseup 事件時多邊形物件如何反應。當使用者釋放滑鼠左鍵時，會發生 mouseup 事件。這裡，一旦觸發 mouseup 事件，描邊寬度就會變成 33。

<!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>Displaying how the object reacts to the mouseup event</h2>
   <p>
      You can select the object and release the left mouse button to see that the stroke width has changed
   </p>
   <canvas id="canvas"></canvas> 
   <script>
      
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
     
     // Initiate a polygon instance
      var polygon = new fabric.Polygon(
         [
            { x: 0, y: 0 },
            { x: 0, y: 50 },
            { x: 50, y: 50 },
            { x: 50, y: 0 },
         ],
         {
            left: 100,
            top: 30,
            fill: "red",
            stroke: "blue",
            strokeWidth: 2,
            objectCaching: false,
         }
      );
      
      // Adding it to the canvas
      canvas.add(polygon);
      
      // Using the mouseup event
      polygon.on("mouseup", () => {
         polygon.set("strokeWidth", 33);
         canvas.renderAll();
      });
   </script>
</body>
</html>

範例 2：顯示物件如何回應 mousedown 事件

讓我們看一個程式碼範例，了解觸發 mousedown 事件時多邊形物件如何反應。當使用者按下按鈕時，會發生 mousedown 事件。在這裡，我們可以看到該物件透過將其描邊寬度從 33 更改為 2 來回應 mousedown 事件。

<!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>Displaying how the object reacts to the mousedown event</h2>
   <p>
      You can press the left mouse button to trigger the mousedown event to see that the stroke width has changed
   </p>
   <canvas id="canvas"></canvas>
   <script>
      
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
      
      // Initiate a polygon instance
      var polygon = new fabric.Polygon(
         [
            { x: 0, y: 0 },
            { x: 0, y: 50 },
            { x: 50, y: 50 },
            { x: 50, y: 0 },
         ],
         {
            left: 100,
            top: 30,
            fill: "red",
            stroke: "blue",
            strokeWidth: 33,
            objectCaching: false,
         }
      );
      
      // Adding it to the canvas
      canvas.add(polygon);
      
      // Using the mousedown event
      polygon.on("mousedown", () => {
         polygon.set("strokeWidth", 2);
         canvas.renderAll();
      });
   </script>
</body>
</html>

結論

在本教學中，我們使用兩個簡單的範例來示範如何使用 FabricJS 來讓多邊形物件對滑鼠事件做出反應。

以上是如何使用 FabricJS 使多邊形物件對滑鼠事件做出反應？的詳細內容。更多資訊請關注PHP中文網其他相關文章！

对象事件鼠标事件 fabric

陳述：

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

上一篇：如何使用 JavaScript 將 Hex 值轉換為 RGBA 值？下一篇：如何使用 JavaScript 將 Hex 值轉換為 RGBA 值？

看更多