Wie deaktiviere ich die Dreiecksselektivität mit FabricJS?-js-Tutorial-php.cn

Wie deaktiviere ich die Dreiecksselektivität mit FabricJS?

王林

Freigeben： 2023-09-08 17:13:02

nach vorne

1200 Leute haben es durchsucht

如何使用 FabricJS 禁用 Triangle 的选择性？

In diesem Tutorial erfahren Sie, wie Sie die Selektivität von Dreiecken mithilfe von FabricJS deaktivieren. Dreieck ist eine der verschiedenen Formen, die FabricJS bereitstellt. Um ein Dreieck zu erstellen, müssen wir eine Instanz der Fabric.Triangle-Klasse erstellen und sie der Leinwand hinzufügen.

Um ein Objekt zu ändern, müssen wir es in FabricJS auswählen. Wir können dieses Verhalten jedoch deaktivieren, indem wir das Attribut selectable verwenden.

Syntax

new fabric.Triangle{ selectable: Boolean }: Object)

Nach dem Login kopieren

Parameter

Optionen (optional) – Dieser Parameter ist ein Objekt< /em>, das unserem Dreieck zusätzliche Anpassungen ermöglicht. Mit diesem Parameter können Sie die Eigenschaften des Objekts im Zusammenhang mit dem Attribut „selectable“ ändern, z. B. Farbe, Cursor, Strichstärke und viele andere Eigenschaften.

Optionsschlüssel< /ul>
Auswählbar
– Diese Eigenschaft akzeptiert boolescheWerte. Wenn ihm der Wert „falsch“ zugewiesen wird, kann das Objekt nicht zur Änderung ausgewählt werden. Der Standardwert ist true.
Beispiel 1
Standardverhalten oder optionale Eigenschaft, wenn sie auf „true“ gesetzt ist.
Sehen wir uns ein Codebeispiel an, um zu verstehen, wie sich ein Objekt standardmäßig verhält, wenn die Eigenschaft „selectable“ auf „True“ gesetzt ist. Wenn die selectable-Eigenschaft auf True gesetzt ist, können wir ein Objekt auswählen, es auf der Leinwand verschieben und ändern. < /p>
<!DOCTYPE html> <html> <head>  <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script> </head> <body> <h2>Default behaviour or when selectable property is set to 'true'</h2> <p>You can try moving the triangle around the canvas or scaling it to prove that it's selectable</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 triangle object var triangle = new fabric.Triangle({ left: 105, top: 70, width: 90, height: 80, fill: "#746cc0", stroke: "#967bb6", strokeWidth: 5, }); // Add it to the canvas canvas.add(triangle); </script> </body> </html>
Nach dem Login kopieren
Beispiel 2
Übergabe eines optionalen Attributs als Schlüssel
In diesem Beispiel weisen wir dem optionalen Attribut einen False-Wert zu. Das bedeutet, dass wir das Dreiecksobjekt nicht mehr zur Änderung auswählen können.
<!DOCTYPE html> <html> <head>  <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script> </head> <body> <h2>Passing selectable property as key</h2> <p>You can see that the triangle is no longer selectable</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 triangle object var triangle = new fabric.Triangle({ left: 105, top: 70, width: 90, height: 80, fill: "#746cc0", stroke: "#967bb6", strokeWidth: 5, selectable: false, }); // Add it to the canvas canvas.add(triangle); </script> </body> </html>
Nach dem Login kopieren
Das obige ist der detaillierte Inhalt vonWie deaktiviere ich die Dreiecksselektivität mit FabricJS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!