Wie deaktiviere ich die Interaktivität von Canvas mit FabricJS?-js-Tutorial-php.cn

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

WBOY

Freigeben： 2023-09-02 15:33:13

nach vorne

1527 Leute haben es durchsucht

如何使用 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)

Nach dem Login kopieren

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>  <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>
Nach dem Login kopieren
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>  <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>
Nach dem Login kopieren
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!