Dans ce tutoriel, nous apprendrons comment désactiver la mise à l'échelle centrée d'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.
Lors de la mise à l'échelle d'un objet via un contrôle, attribuez une vraie valeur à la propriété centeredScaling, et l'origine de la transformation est son centre.
new fabric.Triangle({ centeredScaling: Boolean }: Object)Options (facultatif) - Ce paramètre est un objet< /em> qui fournit une personnalisation supplémentaire à notre triangle. 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 à l'attribut centeredScaling.
centeredScaling - Cette propriété accepte une valeur boolean et nous permet de contrôler si l'objet doit utiliser son centre comme origine de transformation.
Passez centeredScaling comme clé et attribuez-lui une "vraie" valeur
Regardons un exemple de code pour comprendre comment un objet triangle se comporte lorsque la propriété centeredScaling est activée. Lorsque l'on zoome sur un objet, l'origine de la transformation est le centre du triangle.
<!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 centeredScaling as key and assigning it a "true" value</h2>
<p>Try scaling the triangle to see that it is using its center as the center of transformation.</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: 105,
top: 60,
width: 100,
height: 70,
fill: "#5f9ea0",
centeredScaling: true,
});
// Add it to the canvas
canvas.add(triangle);
</script>
</body>
</html>Désactivation de l'attribut centeredScaling
Nous pouvons désactiver l'attribut centeredScaling en lui attribuant une valeur False. Cela n'utilisera plus le centre du triangle comme centre de la transformation. Voici un exemple de code pour démontrer
<!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 centeredScaling property</h2>
<p>Try scaling the triangle to see that it is using one of its corners as the center of transformation.</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: 105,
top: 60,
width: 100,
height: 70,
fill: "#5f9ea0",
centeredScaling: false,
});
// 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!
Comment résoudre l'erreur inconnue 11
A quoi sert la gestion du stockage ?
fonction système()
Comment résoudre l'erreur d'analyse syntaxique
Quelles sont les techniques de test courantes ?
Méthode de mise en œuvre de la fonction de lecture vocale Android
Tutoriel de création de site Web simple PHP
Comment configurer le routeur
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
