Heim >Web-Frontend >js-Tutorial >Wie deaktiviere ich die Interaktivität von Canvas mit FabricJS?

Wie deaktiviere ich die Interaktivität von Canvas mit FabricJS?

WBOYnach vorne: 2023-09-02 15:33:131499Durchsuche

如何使用 FabricJS 禁用画布的交互性？

In diesem Artikel erfahren Sie, wie Sie die Canvas-Interaktivität in FabricJS deaktivieren. Die Interaktionsebene über jedem Objekt ist eine der einzigartigen Funktionen von FabricJS. Sobald wir die Leinwand initialisiert haben, können wir Objekte auswählen, ziehen oder Gruppenauswahlen bearbeiten. All dies kann jedoch rückgängig gemacht werden, indem die Interaktionseigenschaft als False angegeben wird.

Syntax

new fabric.Canvas(element: HTMLElement|String, { interactive : Boolean }: Object)

Parameter

Element – Dieser Parameter ist das
Optionen (optional) – Dieser Parameter ist ein Objekt, das eine zusätzliche Anpassung unserer Leinwand ermöglicht. Mit diesem Parameter ist es möglich, Eigenschaften im Zusammenhang mit der Leinwand zu ändern, wie z. B. Farbe, Cursor, Rahmenbreite und viele andere Eigenschaften, darunter „Interaktiv“ die Eigenschaft, anhand derer wir entscheiden können, ob wir eine interaktive Leinwand wünschen oder nicht. Der Standardwert dieser Eigenschaft ist True.

Beispiel 1

Wenn das Interaktivitätsattribut aktiviert ist

Wenn die Interaktivität aktiviert ist, können wir Objekte frei ziehen, auswählen und nach Bedarf bearbeiten. Wir können es im folgenden Codebeispiel sehen:

<!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 interactivity of canvas</h2>
   <p>Here you can drag the object and manipulate them freely as we have set the <b>interactive</b> property to True. </p>
   <canvas id="canvas"></canvas>
   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas", {
         interactive: true,
      });
      // Creating an instance of the fabric.Rect class
      var obj1 = new fabric.Rect({
         left: 170,
         top: 90,
         width: 60,
         height: 80,
         fill: "#966fd6",
         angle: 90,
      });
      var obj2 = new fabric.Rect({
         left: 200,
         top: 120,
         width: 60,
         height: 80,
         fill: "#ffa343",
         angle: 56,
      });
      // Adding it to the canvas
      canvas.add(obj1);
      canvas.add(obj2);
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
   </script>
</body>
</html>

Beispiel 2

Übergabe von Interaktionsschlüsseln an eine Klasse

Sehen wir uns ein Codebeispiel an, um zu verstehen, wie man die Interaktivität für eine Leinwand deaktiviert. Wir können der Interaktionseigenschaft den Wert „Falsch“ zuweisen, wodurch die Interaktionsebene über dem Objekt im Canvas entfernt wird.

<!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 interactivity of canvas</h2>
   <p>Here you cannot select an area around the objects and manipulate them freely, as we have set the <b>interactive</b> property as False. </b>
   </p>
   <canvas id="canvas"></canvas>
   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas", {
         interactive: false,
      });
      // Creating an instance of the fabric.Rect class
      var obj1 = new fabric.Rect({
         left: 170,
         top: 90,
         width: 60,
         height: 80,
         fill: "#966fd6",
         angle: 90,
      });
      var obj2 = new fabric.Rect({
         left: 200,
         top: 120,
         width: 60,
         height: 80,
         fill: "#ffa343",
         angle: 56,
      });
      // Adding it to the canvas
      canvas.add(obj1);
      canvas.add(obj2);
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
   </script>
</body>
</html>

Das obige ist der detaillierte Inhalt vonWie deaktiviere ich die Interaktivität von Canvas mit FabricJS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：Wie überprüfe ich, ob ein Objekt in JavaScript vorhanden ist?Nächster Artikel：Wie überprüfe ich, ob ein Objekt in JavaScript vorhanden ist?

In Verbindung stehende Artikel

Mehr sehen