Wie verstecke ich den Kontrollrahmen eines Dreiecks mit FabricJS?-js-Tutorial-php.cn

Wie verstecke ich den Kontrollrahmen eines Dreiecks mit FabricJS?

王林

Freigeben： 2023-09-01 08:29:05

nach vorne

606 Leute haben es durchsucht

如何使用 FabricJS 隐藏三角形的控制边框？

In diesem Tutorial erfahren Sie, wie Sie mit FabricJS den Kontrollrahmen eines Dreiecks ausblenden. 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.

Wir können den Kontrollrahmen auf viele Arten anpassen, z. B. durch Hinzufügen einer bestimmten Farbe, eines gepunkteten Musters usw. Mithilfe des Attributs hasBorders können wir Ränder auch vollständig entfernen.

Syntax

new fabric.Triangle({ hasBorders: 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 Eigenschaften ändern, die sich auf das Objekt beziehen, für das hasBorders ein Attribut ist, wie z. B. Farbe, Cursor, Strichstärke und viele andere Eigenschaften.

< /ul>
Optionsschlüssel
hasBorders – Diese Eigenschaft akzeptiert einen booleschen-Wert, der beim Rendern von Kontrollrändern hilft. Bei der Einstellung „False“ wird der Kontrollrahmen nicht gerendert. Der Standardwert ist wahr.
Beispiel 1
Das Dreiecksobjekt steuert das Standarderscheinungsbild des Rahmens

Sehen wir uns ein Codebeispiel an, das das Standarderscheinungsbild des Dreiecksrahmens zeigt. Da der Standardwert der hasBorders-Eigenschaft True ist, werden Rahmen gerendert, wenn das Dreiecksobjekt ausgewählt wird.
<!DOCTYPE html> <html> <head>  <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script> </head> <body> <h2>Default appearance of the controlling borders of a triangle object</h2> <p>Select the triangle to see its controlling borders</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: 75, width: 90, height: 80, fill: "#ff878d", stroke: "#674846", strokeWidth: 5, }); // Add it to the canvas canvas.add(triangle); </script> </body> </html>
Nach dem Login kopieren
Beispiel 2
HasBorders als Schlüssel übergeben und ihm einen „falschen“ Wert zuweisen
Wenn die Eigenschaft hasBorders mit dem Wert „False“ angegeben ist, werden Rahmen nicht mehr gerendert. Das bedeutet, dass der Kontrollrahmen ausgeblendet wird, wenn wir das Dreiecksobjekt auswählen.
<!DOCTYPE html> <html> <head>  <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script> </head> <body> <h2>Passing hasBorders as key and assigning it "false"</h2> <p>Select the triangle and observe that its controlling borders have not been rendered.</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: 75, width: 90, height: 80, fill: "#ff878d", stroke: "#674846", strokeWidth: 5, hasBorders: false, }); // Add it to the canvas canvas.add(triangle); </script> </body> </html>
Nach dem Login kopieren
Das obige ist der detaillierte Inhalt vonWie verstecke ich den Kontrollrahmen eines Dreiecks mit FabricJS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!