Maison >interface Web >js tutoriel >Comment définir une clé personnalisée pour activer/désactiver la mise à l'échelle unifiée sur le canevas FabricJS ?

Comment définir une clé personnalisée pour activer/désactiver la mise à l'échelle unifiée sur le canevas FabricJS ?

PHPzavant: 2023-09-07 11:57:081009parcourir

如何设置自定义键以启用/禁用 FabricJS 画布上的统一缩放？

Dans cet article, nous apprendrons comment définir des clés personnalisées pour activer/désactiver la mise à l'échelle unifiée dans FabricJS. Dans FabricJS, lorsqu'un objet est déplacé depuis un coin, l'objet se transforme proportionnellement. C'est ce qu'on appelle une mise à l'échelle uniforme. Cependant, nous pouvons activer/désactiver ce comportement en utilisant uniScaleKey.

Syntaxe

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

Parameters

element - Ce paramètre est l'élément lui-même et peut être dérivé à l'aide de 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 offre une personnalisation supplémentaire à notre canevas. À l'aide de ce paramètre, vous pouvez modifier de nombreux attributs liés au canevas, tels que la couleur, le curseur et la largeur de la bordure, parmi lesquels uniScaleKey est un attribut. Il accepte une valeur de chaîne qui détermine quelle clé active la mise à l'échelle unifiée. Sa valeur par défaut est shiftKey.

Exemple 1

Passage de l'attribut uniScaleKey avec la valeur "altKey"

Jetons un coup d'œil à l'exemple de code permettant de désactiver une clé personnalisée pour une mise à l'échelle unifiée dans FabricJS. Ici, nous définissons uniScaleKey sur "altKey".

<!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>Setting a custom key to enable/disable uniform scaling on a canvas</h2>
   <p>Hold the <b>alt</b> key and stretch the object diagonally. The object will scale non-uniformly. </p>
   <canvas id="canvas"></canvas>
   <script>
   // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas", {
         uniformScaling: true,
         uniScaleKey: "altKey"
      });
      // Creating an instance of the fabric.Rect class
      var circle = new fabric.Circle({
         left: 215,
         top: 100,
         radius: 50,
         fill: "orange",
      });
      // Adding it to the canvas
         canvas.add(circle);
         canvas.setWidth(document.body.scrollWidth);
         canvas.setHeight(250);
   </script>
</body>
</html>

Exemple 2

Passer l'attribut uniScaleKey avec la valeur 'ctrlKey'

Nous pouvons également transmettre 'ctrlKey'' comme valeur de l'attribut uniScaleKey car il s'agit également d'une touche de modification. Si une valeur NULL ou une clé qui n'est pas une touche de modification est spécifiée pour uniScaleKey, sa fonctionnalité sera désactivée.

Dans cet exemple, uniformScaling s'est vu attribuer une fausse valeur, ce qui signifie que la fonctionnalité a été désactivée. Une fois que nous aurons appuyé sur la ctrlKey, la mise à l'échelle uniforme sera à nouveau activé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>Setting a custom key to enable/disable uniform scaling on a canvas </h2>
   <p>Hold the <b>ctrl</b> key and stretch the object diagonally. It will scale uniformly. </p>
   <canvas id="canvas"></canvas>
   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas", {
         uniformScaling: false,
         uniScaleKey: "ctrlKey"
      });
      // Creating an instance of the fabric.Rect class
      var circle = new fabric.Circle({
         left: 215,
         top: 100,
         radius: 50,
         fill: "red",
      });
      // 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：Trouver l'hypoténuse d'un nombre dans TypeScriptArticle suivant：Trouver l'hypoténuse d'un nombre dans TypeScript

Articles Liés

Voir plus