Comment activer la mise à l'échelle centrée sur le canevas à l'aide de FabricJS ?-js tutoriel-php.cn

Comment activer la mise à l'échelle centrée sur le canevas à l'aide de FabricJS ?

王林

Libérer： 2023-08-29 13:29:02

avant

949 Les gens l'ont consulté

如何使用 FabricJS 在画布上启用居中缩放？

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.

Syntax

new fabric.Canvas(element: HTMLElement|String, { centeredScaling: Boolean }: Object)

Copier après la connexion

Parameters

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.

Exemple 1

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>  <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>
Copier après la connexion
Exemple 2
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>  <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>
Copier après la connexion
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!