Maison > Article > interface Web > Comment désactiver la mise à l'échelle centrée d'un cercle à l'aide de FabricJS ?
Comment désactiver la mise à l'échelle centrée d'un cercle à l'aide de FabricJS ?
- WBOYavant
- 2023-09-07 17:13:021376parcourir
Dans ce tutoriel, nous apprendrons comment désactiver la mise à l'échelle centrée d'un cercle à l'aide de FabricJS. Les cercles sont l'une des différentes formes fournies par FabricJS. Afin de créer un cercle, nous devons créer une instance de la classe Fabric.Circle et l'ajouter au canevas. Lors de la mise à l'échelle par un contrôle, attribuez une valeur vraie à la propriété centeredScaling, en utilisant le centre comme origine de transformation de l'objet.
Syntaxe
new fabric.Circle({ centeredScaling: Boolean }: Object)Paramètres
Options (facultatif) - Ce paramètre est un objet qui offre une personnalisation supplémentaire à notre cercle. En utilisant ce paramètre, vous pouvez modifier la couleur, le curseur, la largeur du trait et d'autres propriétés de l'objet liées à la propriété centeredScaling
touche d'option
centeredScaling - Cette propriété accepte un boolean强> valeur. Lorsque cette propriété est Vrai, l'objet utilise le centre comme origine de transformation.
Exemple 1
Passer centeredScaling comme clé et lui attribuer une "vraie" valeur
Regardons un morceau de code pour voir comment un objet rond se comporte lorsque centeredScaling
em > La propriété est activée. Lorsque l'on zoome sur un objet, l'origine de la transformation est le centre du cercle.
<!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>Disabling the centered scaling of circle using FabricJs</h2>
<p>Select the object and stretch it by holding one of its controlling corners. You will notice the circle scales up uniformly from its center. This is the default behavior. Here we have not used the <b>centeredScaling</b> property but by default, it is set to True. </p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
var cir = new fabric.Circle({
left: 215,
top: 100,
fill: "white",
radius: 50,
stroke: "#c154c1",
strokeWidth: 5,
borderColor: "#daa520",
centeredScaling: true
});
// Adding it to the canvas
canvas.add(cir);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>Exemple 2
Désactivation de la propriété centeredScaling
Nous pouvons désactiver la propriété centeredScaling en lui spécifiant une fausse valeur. Cela forcera le cercle à ne plus utiliser le centre du cercle comme centre de la transformation. Voici un code pour le prouver
<!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>Disabling the centered scaling of circle using FabricJs</h2>
<p>Select the object and stretch it by holding one of its controlling corners. You will notice that the circle is no longer scaling up uniformly from its center. Here we have used the <b>centeredScaling</b> property and set it False. </p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
var circle = new fabric.Circle({
left: 215,
top: 100,
fill: "",
radius: 50,
stroke: "#c154c1",
strokeWidth: 5,
borderColor: "#daa520",
centeredScaling: false
});
// Adding it to the canvas
canvas.add(circle);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</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!