Wie erstelle ich mit FabricJS ein Dreieck mit Randfarbe?-js-Tutorial-php.cn

Wie erstelle ich mit FabricJS ein Dreieck mit Randfarbe?

WBOY

Freigeben： 2023-09-12 12:29:02

nach vorne

1419 Leute haben es durchsucht

如何使用 FabricJS 创建带有边框颜色的三角形？

In diesem Tutorial erstellen wir mit FabricJS ein Dreieck mit einer Randfarbe. 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.

Da FabricJS so flexibel ist, können wir unsere Dreiecksobjekte nach Belieben anpassen. Eine der von FabricJS bereitgestellten Eigenschaften ist borderColor, mit der wir die Farbe des Rahmens manipulieren können, wenn das Objekt aktiv ist.

Syntax

new fabric.Triangle({ borderColor: String }: 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 wie Farbe, Cursor, Strichstärke und viele andere Eigenschaften ändern, die sich auf das Objekt beziehen, dessen Eigenschaft borderColor ist.

< /ul>
Optionstaste
borderColor – Diese Eigenschaft akzeptiert einen String, der die Farbe des Rahmens angibt, wenn ein Dreiecksobjekt ausgewählt wird. Der Standardwert ist RGB(178.204.255).
Beispiel 1
Übergabe des borderColor-Schlüssels mithilfe eines String-Werts
Sehen wir uns ein Codebeispiel an, um zu verstehen, wie der Eigenschaft borderColor ein Wert zugewiesen wird. Wir haben der Taste borderColor den Wert „blue“ zugewiesen, der dabei hilft, einen blauen Rand zu erstellen, wenn ein 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>Passing borderColour key with a String value</h2> <p>Select the triangle to see the border colour</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: 60, width: 100, height: 70, fill: "#deb887", borderColor: "blue", }); // Add it to the canvas canvas.add(triangle); </script> </body> </html>
Nach dem Login kopieren
Beispiel 2
Übergabe eines RGBA-Werts an den Schlüssel borderColor
Anstatt einen einfachen Farbnamen als Zeichenfolge zu übergeben, können wir auch einen
RGBA-Wert mit Komponenten verwenden, die Rot, Grün, Blau und spezifizieren die Menge an Alpha, wobei Alpha für die Deckkraft steht. In diesem Beispiel haben wir rgb(128,0,128) verwendet, den RGB-Wert für Lila.
<!DOCTYPE html> <html> <head>  <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script> </head> <body> <h2>Passing an RGBA value to the borderColor key</h2> <p>Select the triangle to see the border colour</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: 60, width: 100, height: 70, fill: "#deb887", borderColor: "rgb(128,0,128)", }); // Add it to the canvas canvas.add(triangle); </script> </body> </html>
Nach dem Login kopieren
Das obige ist der detaillierte Inhalt vonWie erstelle ich mit FabricJS ein Dreieck mit Randfarbe?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!