首頁 > web前端 > js教程 > 主體

如何使用 FabricJS 當滑鼠懸停在某個物件上時突出顯示該物件?

王林
發布: 2023-08-29 11:21:16
轉載
830 人瀏覽過

如何使用 FabricJS 当鼠标悬停在某个对象上时突出显示该对象?

我們可以透過建立fabric.Polygon的實例來建立一個Polygon物件。多邊形物件的特徵可以是由一組連接的直線段組成的任何閉合形狀。由於它是 FabricJS 的基本元素之一,我們也可以透過應用角度、不透明度等屬性輕鬆自訂它。 FabricJS 為我們提供了一組廣泛的事件,我們可以使用它們來創建不同的效果。

由於我們希望在滑鼠懸停時發生更改,因此我們將使用滑鼠移動時觸發的 mouse:move 事件。我們的第二個要求是突出顯示一個對象,這可以透過使用opacity 屬性來實現,但是,當畫布上有很多對象並且我們想要突出顯示懸停在其上的對象時,我們需要使用forEachObject 方法。此方法為給定函數運行 for-each 循環,從而為每個物件執行它。

文法

forEachObject( callback: function, context: object ): Self
登入後複製

參數

  • callback - 此屬性接受一個函數,該函數使用目前物件作為第一個參數、索引作為第二個參數和一個所有物件的陣列作為第三個。

  • context - 此屬性接受一個 Object#,它表示呼叫回呼函數的上下文。

範例1:僅用一個物件顯示高光效果

讓我們看一個程式碼範例,看看當畫布上只有一個物件時如何添加突出顯示效果。我們已將 mouseovermouseout 事件附加到多邊形物件(在本例中為三角形)。 mouseover 當滑鼠移到物件上時執行,mouseout 當滑鼠懸停在物件外時執行。一旦我們將遊標移到元素上,其不透明度就會從 0.5 改為 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>Displaying highlight effect with only one object</h2>
   <p>
      You can see that the object is being highlighted when the cursor is moved onto the element
   </p>
   <canvas id="canvas"></canvas>
   <script>
      
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
      
      // Initiating a points array
      var points = [
         { x: 30, y: 50 },
         { x: 0, y: 0 },
         { x: 60, y: 0 },
      ];
      
      // Initiating a polygon object
      var triangle = new fabric.Polygon(points, {
         left: 100,
         top: 40,
         fill: "#1e90ff",
         strokeWidth: 4,
         stroke: "green",
         flipY: true,
         scaleX: 2,
         scaleY: 2, 
         opacity: 0.5,
      });
      
      // Adding it to the canvas
      canvas.add(triangle);
      
      // Using mouseover event
      triangle.on("mouseover", () => {
         triangle.set("opacity", 1);
         canvas.renderAll();
      });
      
      // Using mouseout event
      triangle.on("mouseout", () => {
         triangle.set("opacity", 0.5);
         canvas.renderAll();
      });
   </script>
</body>
</html>
登入後複製

範例2:顯示多個物件的高光效果

在此範例中,我們將了解當滑鼠懸停在物件上時如何突出顯示該物件。每次滑鼠移動時,都會觸發 mouse:move 事件。這裡我們透過滑鼠指標的「x」和「y」位置,利用數學距離公式計算出座標平面中兩點之間的距離。這個距離再除以50,這是一個任意數,它使( dist/50 ) 分數變小(我們知道,隨著分母變大,分數變小),這樣當它再除以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>Displaying highlight effect with multiple objects</h2>
   <p>
      You can see that an object is being highlighted only when the cursor is moved onto the element and is depended on the distance
   </p>
   <canvas id="canvas"></canvas>
   <script>
      
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
      
      // Initiating a points array
      var points = [
         { x: 30, y: 50 },
         { x: 0, y: 0 },
         { x: 60, y: 0 },
      ];
      
      // Initiating a polygon object
      var triangle = new fabric.Polygon(points, {
         left: 100,
         top: 40,
         fill: "#1e90ff",
         strokeWidth: 4,
         stroke: "green",
         flipY: true,
         scaleX: 2,
         scaleY: 2,
         opacity: 0.5,
      });
      
      // Adding it to the canvas
      canvas.add(triangle);
      
      // Using clone method
      triangle.clone(function (c) {
         canvas.add(
            c.set({
               left: 500,
               top: 79,
               angle: 15,
               scaleX: 0.7,
               scaleY: 0.7,
               fill: "red",
            })
         );
      });
      
      // Using clone method
      triangle.clone(function (c) {
         canvas.add(
            c.set({
               left: 340,
               top: 90,
               angle: -15,
               scaleX: 2,
               scaleY: 2,
               fill: "black",
            })
         );
      });
      
      // Using clone method
      triangle.clone(function (c) {
         canvas.add(
            c.set({
               left: 280,
               top: 190,
               angle: 21,
               scaleX: 0.9,
               scaleY: 0.9,
               fill: "#ffa500",
            })
         );
      });
      
      // Using mouse:move event
      canvas.on("mouse:move", (options) => {
        
        // Get the mouse coordinates
         var p = canvas.getPointer(options.e);
         canvas.forEachObject(function (obj) {
            
            // Get distance between objects and mouse pointer
            var distX = Math.abs(p.x - obj.left),
            distY = Math.abs(p.y - obj.top),
            dist = Math.round(
               Math.sqrt(Math.pow(distX, 2) + Math.pow(distY, 2))
            );
            
            // Update the opacity as a proportion of distance
            obj.set("opacity", 1 / (dist / 50));
         });
         canvas.renderAll();
      });
   </script>
</body>
</html>
登入後複製

結論

在本教學中,我們使用兩個簡單的範例來示範如何使用 FabricJS 在滑鼠懸停在物件上時突出顯示物件。

以上是如何使用 FabricJS 當滑鼠懸停在某個物件上時突出顯示該物件?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:tutorialspoint.com
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!