Maison > Article > interface Web > Comment définir la taille des coins de contrôle d'un rectangle à l'aide de FabricJS ?
Comment définir la taille des coins de contrôle d'un rectangle à l'aide de FabricJS ?
- WBOYavant
- 2023-09-21 11:17:021102parcourir
Dans ce tutoriel, nous apprendrons comment définir la taille des coins de contrôle Rectangle utilisant FabricJS. L'angle de contrôle de l'objet nous permet de le mettre à l'échelle et de l'étirer ou changer son emplacement.
Nous pouvons personnaliser les coins de contrôle de plusieurs manières, par exemple en ajoutant des Coloriez-le, changez sa taille et bien plus encore. Nous pouvons utiliser cornerSize pour changer la taille propriété.
Syntaxe
new fabric.Rect({ cornerSize: Number }: Object)Paramètres
Options (facultatif) - Ce paramètre est un objet qui fournit une personnalisation supplémentaire à notre rectangle. À l'aide de ce paramètre, vous pouvez modifier la couleur, le curseur, la largeur du trait et d'autres propriétés liées à l'objet avec cornerSize comme attribut.
Option Key
cornerSize - Cette propriété accepte un number qui nous permet de manipuler la taille des coins de l'objet sélectionné. La valeur par défaut est 13.
Exemple 1
Contrôler la taille par défaut des coins
Regardons un exemple de code qui décrit la taille par défaut des coins de contrôle Lorsqu'un objet rectangulaire est activement sélectionné.
<!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 size of the controlling corners</h2>
<p>Select the rectangle to see the default size of the controlling corners</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 cornerSize comme clé avec une valeur personnalisée
Dans cet exemple, nous passerons la propriété cornerSize comme clé avec la valeur 17. nous Vous pouvez voir comment cela change la taille de nos coins de contrôle lorsque l'objet rectangulaire Choisi.
<!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 cornerSize as key with a custom value</h2>
<p>Select the rectangle to see the size of the controlling corners</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",
cornerSize: 17,
});
// 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!