Maison > Article > interface Web > Comment désactiver la mise à l'échelle unifiée dans Canvas à l'aide de FabricJS ?

Comment désactiver la mise à l'échelle unifiée dans Canvas à l'aide de FabricJS ?

WBOYavant: 2023-09-03 20:57:08872parcourir

如何使用 FabricJS 禁用画布中的统一缩放？

Dans cet article, nous apprendrons comment désactiver la mise à l'échelle unifiée dans Canvas à l'aide de FabricJS. Dans FabricJS, lorsqu'un objet est déplacé depuis un coin, l'objet se transforme proportionnellement. Cependant, nous pouvons désactiver ce comportement en utilisant l'attribut uniformScaling.

Syntaxe

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

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. En utilisant ce paramètre, vous pouvez modifier les propriétés liées au canevas telles que la couleur, le curseur, la largeur de la bordure et de nombreuses autres propriétés, dont uniformScaling est une propriété. Il accepte une valeur booléenne qui détermine si l'objet doit être mis à l'échelle proportionnellement. Sa valeur par défaut est True.

Exemple : passer uniformScaling comme clé avec la valeur False

Regardons un exemple de code pour voir comment un objet évolue de manière inégale lorsque uniformScaling est défini sur False . À partir de FabricJS version 4, la propriété uniScaleTransform a été supprimée et remplacée par uniformScaling.

<!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>
   <div style="padding: 10px; font-weight: bold; margin-left: 32px">
      How to disable uniform scaling in canvas using FabricJS?
   </div>
   <canvas
      id="canvas"
      width="500"
      height="300"
      style="border: 2px solid #000000">
   </canvas>

   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas", {
      // UniformScaling is disabled
         uniformScaling: false
      });
      // Creating an instance of the fabric.Rect class
      var circle = new fabric.Circle({
         left: 70,
         top: 90,
         radius: 40,
         fill: "#006400",
      });

      // Adding it to the canvas
      canvas.add(circle);
   </script>
</body>
</html>

Output

Comment désactiver la mise à l'échelle unifiée dans Canvas à l'aide de FabricJS ?

Exemple : passez la clé uniformScaling à la classe avec la valeur True

Maintenant que nous avons compris comment mettre à l'échelle de manière non uniforme lorsque uniformScaling est False, nous pouvons activer uniformScaling pour éviter cela. Voyons à quoi ressemble le code -

<!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>
   <div style="padding: 10px; font-weight: bold; margin-left: 32px">
      How to disable uniform scaling in canvas using FabricJS?
   </div>
   <canvas
      id="canvas"
      width="500"
      height="300"
      style="border: 2px solid #000000">
   </canvas>

   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas", {
         // UniformScaling is enabled
      uniformScaling: true
      });
      // Creating an instance of the fabric.Rect class
      var circle = new fabric.Circle({
         left: 70,
         top: 90,
         radius: 40,
         fill: "#006400",
      });

      // Adding it to the canvas
      canvas.add(circle);
   </script>
</body>
</html>

output

Comment désactiver la mise à l'échelle unifiée dans Canvas à l'aide de FabricJS ?

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：Vérifiez si une chaîne en JavaScript peut être un palindromeArticle suivant：Vérifiez si une chaîne en JavaScript peut être un palindrome

Articles Liés

Voir plus