Maison > Article > interface Web > Comment définir un motif de tirets pour les coins de contrôle d'un rectangle à l'aide de FabricJS ?
Comment définir un motif de tirets pour les coins de contrôle d'un rectangle à l'aide de FabricJS ?
- WBOYavant
- 2023-08-30 15:21:03971parcourir
Dans ce tutoriel, nous allons apprendre à utiliser FabricJS pour implémenter un motif en pointillés qui contrôle les coins d'un rectangle. Les coins de contrôle d'un objet nous permettent de le redimensionner, de l'étirer ou de changer sa position.
Nous pouvons personnaliser le coin de contrôle de plusieurs manières, par exemple en y ajoutant une couleur spécifique, en modifiant sa taille, etc. Nous pouvons également spécifier un motif de tirets qui contrôle les coins à l'aide de l'attribut cornerDashArray.
Syntaxe
new fabric.Rect({ cornerDashArray: Array }: Object)Paramètres
Options (facultatif) - Ce paramètre est un objet qui fournit une personnalisation supplémentaire à notre rectangle. En utilisant ce paramètre, vous pouvez modifier les propriétés liées à l'objet dont cornerDashArray est un attribut, telles que la couleur, le curseur, la largeur du trait et bien d'autres propriétés.
cornerDashArray - Cette propriété accepte un Array qui nous permet de spécifier un motif de tiret qui contrôle les coins. Par exemple, si nous transmettons un tableau avec les valeurs [2,3], il représente un motif de tirets de 2 pixels et d'espaces de 3 pixels, et ce motif se répète à l'infini.
Option Key
Exemple 1
Apparence par défaut des coins de contrôle
Regardons un exemple de code qui décrit l'apparence par défaut des coins de contrôle objet rectangulaire. Puisque nous n'utilisons pas l'attribut cornerDashArray, il n'y a pas Affichage du motif de tiret.
<!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>Default appearance of controlling corners</h2>
<p>Select the rectangle to see the default appearance</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 rectangle object
var rect = new fabric.Rect({
left: 125,
top: 90,
width: 170,
height: 70,
fill: "#cf1020",
borderColor: "black",
borderScaleFactor: 3,
cornerColor: "#3b7a57",
});
// Add it to the canvas
canvas.add(rect);
</script>
</body>
</html>Exemple 2
Passer la propriété cornerDashArray en tant que clé
Dans cet exemple, nous transmettons la valeur [1,2,1] à la propriété cornerDashArray. ce Cela signifie qu'un motif en pointillés sera créé avec une longue ligne de 1 px suivie de Un espace de 2 px, puis tracez à nouveau une longue ligne de 1 px, après quoi un espace de 1 px sera dessiné Production et plus encore.
<!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 cornerDashArray property as key</h2>
<p>Select the rectangle to see the appearance of the controlling corners with dash pattern</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 rectangle object
var rect = new fabric.Rect({
left: 125,
top: 90,
width: 170,
height: 70,
fill: "#cf1020",
borderColor: "black",
borderScaleFactor: 3,
cornerColor: "#3b7a57",
cornerDashArray: [1, 2, 1],
});
// Add it to the canvas
canvas.add(rect);
</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!