recherche

Maison >interface Web >js tutoriel >Comment activer la mise à l'échelle centrée sur le canevas à l'aide de FabricJS ?

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

王林
王林avant
2023-08-29 13:29:02930parcourir

如何使用 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)

Parameters

  • Element - Ce paramètre est l'élément em> lui-même et peut être dérivé en utilisant Document.getElementById() ou l'identifiant de l'élément lui-même. Le canevas FabricJS sera initialisé sur cet é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>
   <!-- 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>

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>
   <!-- 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!

Déclaration：
Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer
Article précédent：Comment convertir un nombre en tableau en JavaScript ?Article suivant：Comment convertir un nombre en tableau en JavaScript ?

Articles Liés

Voir plus