Dans cet article, nous apprendrons comment activer la mise à l'échelle centrée sur le canevas à l'aide de FabricJS. Dans FabricJS, lorsqu'un objet est déplacé depuis un coin, l'objet se transforme proportionnellement. Nous pouvons utiliser la propriété centeredScaling pour utiliser le centre comme origine de la transformation.
new fabric.Canvas(element: HTMLElement|String, { centeredScaling: Boolean }: Object)Element - Ce paramètre est l'élément
Options (facultatif) - Ce paramètre est un objet qui permet une personnalisation supplémentaire de notre canevas. Vous pouvez utiliser ce paramètre pour modifier de nombreux attributs liés au canevas, tels que la couleur, le curseur et la largeur de la bordure, parmi lesquels centeredScaling est un attribut. Il accepte une valeur booléenne qui détermine si l'objet doit utiliser le point central comme origine de la transformation. La valeur par défaut est Faux.
Passer la clé centeredScaling avec la valeur false
Regardons un exemple de code pour voir comment un objet évolue lorsque centeredScaling est défini sur False.
<!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>Enabling centered scaling in canvas using FabricJS</h2>
<p>Select the object and try to resize it by its corners. The object will scale non-uniformly from its center.</p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas", {
centeredScaling: false
});
// Creating an instance of the fabric.Rect class
var circle = new fabric.Circle({
left: 200,
top: 100,
radius: 40,
fill: "blue",
});
// Adding it to the canvas
canvas.add(circle);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>Passage de la clé centeredScaling à une classe avec une valeur de True
Par défaut, la clé centeredScaling est définie sur False. Il faut donc transmettre la clé à la classe et lui donner une valeur réelle pour que les objets puissent utiliser leur centre comme origine de la transformation.
<!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>Enabling centered scaling in canvas using FabricJS</h2>
<p>Here we have set <b>centeredScaling</b> to True. Select the object and try to resize it by its corners. The object will scale uniformly from its center. </p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas", {
centeredScaling: true
});
// Creating an instance of the fabric.Rect class
var circle = new fabric.Circle({
left: 200,
top: 100,
radius: 40,
fill: "blue",
});
// 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!
Vérificateur de compatibilité
La base de données phpstudy ne peut pas démarrer la solution
Comment utiliser onclick en HTML
Que signifie STO dans la blockchain ?
Comment réparer la base de données SQL
Comment supprimer mon adresse WeChat
Comment prendre des captures d'écran sur les téléphones mobiles Huawei
Introduction aux plug-ins requis pour que vscode exécute Java
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
