Maison > Article > interface Web > Comment ajouter un trait à un triangle en utilisant FabricJS ?
Comment ajouter un trait à un triangle en utilisant FabricJS ?
- WBOYavant
- 2023-09-21 13:49:02682parcourir
Dans ce tutoriel, nous apprendrons comment ajouter un trait à un triangle à l'aide de 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.
Notre objet triangle peut être personnalisé de nombreuses manières, comme en changeant ses dimensions, en ajoutant une couleur de fond ou en changeant la couleur des lignes tracées autour de l'objet. Nous pouvons le faire en utilisant l'attribut Stroke.
Syntaxe
new fabric.Triangle({ stroke : String }: Object)Paramètres
Options (facultatif) - Ce paramètre est un objet 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 pour lequel Stroke est un attribut.
Stroke - Cette propriété accepte une String pour déterminer la couleur de la bordure de cet objet.
Options Keys
Exemple 1
Passer des traits sous forme de clés avec des valeurs hexadécimales strong>
Regardons un exemple de code pour comprendre comment un objet triangle s'affiche lors de l'utilisation de l'attribut lines. Les codes de couleur hexadécimaux commencent par « # » suivi d'un nombre à six chiffres représentant la couleur. Dans ce cas, nous avons utilisé "#3cb371", qui est Mid-Sea Green.
<!DOCTYPE html>
<html>
<head>
<!-- Adding the Fabric JS Library-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script>
</head>
<body>
<h2>Passing stroke as key with a hexadecimal value</h2>
<p>You can see that the stroke around the triangle is of medium sea-green 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: 120,
top: 30,
width: 90,
height: 80,
fill: "#ecebbd",
stroke: "#3cb371",
strokeWidth: 7,
});
// Add it to the canvas
canvas.add(triangle);
</script>
</body>
</html>Exemple 2
Passer la valeur rgba à Strokeproperty
Dans cet exemple, nous verrons comment spécifier une valeur rgba pour la propriété Stroke. Au lieu de codes de couleur hexadécimaux, nous pouvons utiliser les valeurs RGBA qui signifient : rouge, vert, bleu et alpha. Le paramètre alpha spécifie l'opacité de la couleur. Dans cet exemple, nous avons utilisé la valeur rgba (46,139,87,0,8), qui est un vert d'eau avec une opacité de 0,8.
<!DOCTYPE html>
<html>
<head>
<!-- Adding the Fabric JS Library-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script>
</head>
<body>
<h2>Passing an rgba value to the stroke property</h2>
<p>You can see that the stroke colour is coming from the RGBA value now</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: 120,
top: 30,
width: 90,
height: 80,
fill: "#ecebbd",
stroke: "rgba(46,139,87,0.8)",
strokeWidth: 7,
});
// Add it to the canvas
canvas.add(triangle);
</script>
</body>
</html>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!