recherche

Maison >interface Web >js tutoriel >Comment redimensionner de manière non uniforme un objet par coins à l'aide de FabricJS ?

Comment redimensionner de manière non uniforme un objet par coins à l'aide de FabricJS ?

WBOY
WBOYavant
2023-08-25 10:13:071077parcourir

如何使用 FabricJS 通过角点非均匀地调整对象大小？

Dans cet article, nous apprendrons comment redimensionner de manière non uniforme des objets par coins à l'aide de FabricJS. Dans FabricJS, lorsqu'un objet est déplacé depuis un coin, l'objet se transforme proportionnellement. Cependant, nous pouvons contrôler ce comportement en appuyant sur uniScaleKey.

Syntax

new fabric.Canvas(element: HTMLElement|String, { uniScaleKey: String }: 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. À l'aide de ce paramètre, vous pouvez modifier la couleur, le curseur, la largeur de la bordure et de nombreuses autres propriétés liées au canevas, parmi lesquelles uniScaleKey est une propriété. Il accepte une valeur de chaîne indiquant quelle clé active la mise à l'échelle unifiée. Sa valeur par défaut est shiftKey. Les valeurs clés possibles sont : altKey, shiftKey et ctrlKey.

Exemple 1

Appuyez sur la touche Maj pour désactiver la mise à l'échelle uniforme

Lorsqu'un objet est transformé en faisant glisser les bords tout en conservant les proportions, nous disons que l'objet est uniformément mis à l'échelle. uniScaleKey nous permet de contrôler ce comportement sur place. Par défaut, les objets dans FabricJS évoluent proportionnellement. Examinons un exemple de code pour voir comment un objet évolue de manière non uniforme lorsque la touche Maj est enfoncée. 

<!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>Resizing an object non-uniformly via corner points</h2>
   <p>Hold the <b>shift</b> key and drag the object from its corners. The object will resize non-uniformly. </p>
   <canvas id="canvas"></canvas>
   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      // 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);
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
   </script>
</body>
</html>

Exemple 2

Changez la valeur de uniScaleKey en ctrlKey

Bien que sa valeur par défaut soit shiftKey, nous pouvons également utiliser les valeurs : 'ctrlKey' et 'altKey'. Si NULL ou toute autre clé est spécifiée, cette fonctionnalité sera désactivée. 

<!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>Resizing an object non-uniformly via corner points</h2>
   <p>Hold the <b>ctrl</b> key and drag the object from its corners. The object will resize non-uniformly. </p>
   <canvas id="canvas"></canvas>
   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas", {
         uniScaleKey: "ctrlKey",
      });
      // 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);
      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!

NULL 字符串 对象
Déclaration：
Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer
Article précédent：Expliquer comment fonctionnent les minuteries en JavaScriptArticle suivant：Expliquer comment fonctionnent les minuteries en JavaScript

Articles Liés

Voir plus