Maison > Article > interface Web > Comment retourner un triangle horizontalement en utilisant FabricJS ?
Comment retourner un triangle horizontalement en utilisant FabricJS ?
- WBOYavant
- 2023-09-14 18:09:061410parcourir
Dans ce tutoriel, nous allons apprendre à retourner un objet Triangle horizontalement à 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. Nous pouvons retourner l'objet triangle horizontalement en utilisant la propriété flipX.
Syntaxe
new fabric.Triangle({ flipX: Boolean }: 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 dont flipX est la propriété.
flipX − Cette propriété accepte une valeur booléenne qui nous permet de retourner l'objet horizontalement.
Option Key
Exemple 1
Passer flipX comme clé avec une valeur « fausse »
Regardons un exemple de code qui nous montre l'orientation par défaut des objets triangulaires dans FabricJS. Puisque nous avons passé une valeur False à la propriété flipX, l'objet triangle ne se retournera pas horizontalement.
<!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 flipX as key with a 'False' value</h2>
<p>You can see that the triangle object has not been flipped horizontally</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: 75,
top: 45,
width: 180,
height: 109,
stroke: "#e3f988",
strokeWidth: 5,
flipX: false,
});
// Create gradient fill
triangle.set(
"fill",
new fabric.Gradient({
type: "linear",
coords: { x1: 0, y1: 0, x2: 100, y2: 0 },
colorStops: [
{ offset: 0, color: "#545a2c" },
{ offset: 1, color: "#6495ed" },
],
})
);
// Add it to the canvas
canvas.add(triangle);
</script>
</body>
</html>Exemple 2
Passer l'attribut flipX comme clé avec une valeur de "True"
Dans cet exemple, nous avons un objet triangle d'une largeur de 180px et d'une hauteur de 109px, avec une remplissage en dégradé linéaire. Lorsque nous appliquons la propriété flipX à l'objet triangle, il se retourne horizontalement, nous voyons donc également le dégradé inversé.
<!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 the flipX property as key with a 'True' value</h2>
<p>You can see that the triangle has been flipped horizontally</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: 75,
top: 45,
width: 180,
height: 109,
stroke: "#e3f988",
strokeWidth: 5,
flipX: true,
});
// Create gradient fill
triangle.set( "fill", new fabric.Gradient({
type: "linear", coords: { x1: 0, y1: 0, x2: 100, y2: 0 },
colorStops: [{ offset: 0, color: "#545a2c" },{ offset: 1, color: "#6495ed" },],})
);
// 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!