Comment créer un triangle avec une couleur de bordure en utilisant FabricJS ?-js tutoriel-php.cn

Comment créer un triangle avec une couleur de bordure en utilisant FabricJS ?

WBOY

Libérer： 2023-09-12 12:29:02

avant

1419 Les gens l'ont consulté

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

Dans ce tutoriel, nous allons créer un triangle avec une couleur de bordure en utilisant FabricJS. Triangle est l'une des différentes formes fournies par FabricJS. Afin de créer un triangle, nous devons créer une instance de la classe Fabric.Triangle et l'ajouter au canevas.

Comme FabricJS est si flexible, nous pouvons personnaliser nos objets triangulaires comme bon nous semble. L'une des propriétés fournies par FabricJS est borderColor, qui nous permet de manipuler la couleur de la bordure lorsque l'objet est actif.

Syntaxe

new fabric.Triangle({ borderColor: String }: Object)

Copier après la connexion

Paramètres

Options (facultatif) - Ce paramètre est un objet< /em> qui fournit une personnalisation supplémentaire à notre triangle. En utilisant ce paramètre, vous pouvez modifier des propriétés telles que la couleur, le curseur, la largeur du trait et de nombreuses autres propriétés liées à l'objet dont borderColor est la propriété.

< /ul>
Option key
borderColor - Cette propriété accepte une string qui spécifie la couleur de la bordure lorsqu'un objet triangle est sélectionné. Sa valeur par défaut est RVB (178,204,255).
Exemple 1
Passer la clé borderColour à l'aide de la valeur String
Regardons un exemple de code pour comprendre comment attribuer une valeur à la propriété borderColor. Nous avons attribué la valeur "blue" à la touche borderColor, qui permet de créer une bordure bleue lorsqu'un objet triangle est sélectionné.
<!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>
Copier après la connexion
Exemple 2
Passer une valeur RGBA à la clé borderColor
Au lieu de passer un simple nom de couleur sous forme de chaîne, nous pouvons également utiliser une valeur RGBA avec des composants spécifiant le rouge, le vert, le bleu et la quantité d'Alpha, où alpha représente l'opacité. Dans cet exemple, nous avons utilisé rgb(128,0,128) qui est la valeur RVB du violet.
<!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>
Copier après la connexion
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!