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!
Quelles sont les vulnérabilités courantes de Tomcat ?
Configurer les variables d'environnement Java
les jeux sur iPad n'ont pas de son
Trading quantitatif de monnaie numérique
Comment utiliser la fonction moyenne
python configurer les variables d'environnement
Comment désactiver la complétion automatique sublime
MySQL crée une procédure stockée
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
