Wie kann man mit FabricJS ein Polygonobjekt auf Mausereignisse reagieren lassen?-js-Tutorial-php.cn

Wie kann man mit FabricJS ein Polygonobjekt auf Mausereignisse reagieren lassen?

WBOY

Freigeben： 2023-08-31 14:37:08

nach vorne

730 Leute haben es durchsucht

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

Wir können ein Polygon-Objekt erstellen, indem wir eine Instanz von fabric.Polygon erstellen. Ein Polygonobjekt kann als jede geschlossene Form charakterisiert werden, die aus einer Reihe verbundener gerader Liniensegmente besteht. Da es eines der Grundelemente von FabricJS ist, können wir es auch einfach anpassen, indem wir Eigenschaften wie Winkel, Deckkraft usw. anwenden. Wir verwenden die Ereignisse mouseup und mousedown, um zu demonstrieren, wie Polygonobjekte auf vom Benutzer ausgelöste Mausereignisse reagieren.

Grammatik

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

Nach dem Login kopieren

Beispiel 1: Zeigen Sie, wie ein Objekt auf Mouseup-Ereignisse reagiert

Sehen wir uns ein Codebeispiel an, um zu sehen, wie ein Polygonobjekt reagiert, wenn das mouseup-Ereignis ausgelöst wird. Das mouseup-Ereignis tritt ein, wenn der Benutzer die linke Maustaste loslässt. Sobald das mouseup-Ereignis ausgelöst wird, beträgt die Strichstärke hier 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>

Nach dem Login kopieren

Beispiel 2: Zeigen Sie, wie ein Objekt auf ein Mousedown-Ereignis reagiert

Schauen wir uns ein Codebeispiel an, um zu sehen, wie ein Polygonobjekt reagiert, wenn das Ereignis „mousedown“ ausgelöst wird. Wenn der Benutzer die Taste drückt, tritt das Ereignis „mousedown“ ein. Hier können wir sehen, dass das Objekt auf das Mousedown-Ereignis reagiert, indem es seine Strichstärke von 33 auf 2 ändert.

<!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>

Nach dem Login kopieren

Fazit In diesem Tutorial zeigen wir anhand zweier einfacher Beispiele, wie man mithilfe von FabricJS dafür sorgt, dass ein Polygonobjekt auf Mausereignisse reagiert.
Das obige ist der detaillierte Inhalt vonWie kann man mit FabricJS ein Polygonobjekt auf Mausereignisse reagieren lassen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!