Comment verrouiller l'inclinaison verticale d'Ellipse à l'aide de FabricJS ?-js tutoriel-php.cn

Comment verrouiller l'inclinaison verticale d'Ellipse à l'aide de FabricJS ?

王林

Libérer： 2023-09-01 15:05:10

avant

733 Les gens l'ont consulté

如何使用 FabricJS 锁定 Ellipse 的垂直倾斜？

Dans ce tutoriel, nous apprendrons comment verrouiller l'inclinaison verticale d'une ellipse à l'aide de FabricJS. Tout comme nous pouvons spécifier la position, la couleur, l'opacité et la taille de l'objet elliptique dans le canevas, nous pouvons également spécifier si nous voulons arrêter d'incliner l'objet verticalement. Cela peut être fait en utilisant l'attribut lockSkewingY.

Syntaxe

new fabric.Ellipse({ lockSkewingY : Boolean }: Object)

Copier après la connexion

Paramètres

Options (facultatif) - Ce paramètre est un Objet< /em> offrant une personnalisation supplémentaire à notre ellipse. En utilisant ce paramètre, vous pouvez modifier la couleur, le curseur, la largeur du trait et bien d'autres propriétés associées à l'objet dont lockSkewingY est la propriété.

Option Key

lockSkewingY - Cette propriété accepte une valeur Boolean. Si on lui donne une valeur "vraie", l'inclinaison verticale de l'objet sera verrouillée.

Exemple 1

Comportement par défaut de l'objet Ellipse dans le canevas

Regardons un exemple pour comprendre le comportement par défaut de l'objet Ellipse lorsque la propriété lockSkewingY n'est pas utilisée. Vous pouvez incliner un objet horizontalement et verticalement en appuyant sur la touche Maj puis en le faisant glisser horizontalement ou verticalement.

<!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>How to lock the vertical skewing of Ellipse using FabricJS?</h2>
      <p>Select the object and stretch it horizontally or vertically by pressing the <b>shift</b> key. The object will get skewed. This is the default behavior. Here we have not applied the <b>lockSkewing</b> property. </p>
      <canvas id="canvas"></canvas>

      <script>
         // Initiate a canvas instance
         var canvas = new fabric.Canvas("canvas");

         // Initiate an ellipse instance
         var ellipse = new fabric.Ellipse({
            left: 115,
            top: 50,
            fill: "white",
            rx: 80,
            ry: 50,
            stroke: "black",
            strokeWidth: 5,
         });

         // Adding it to the canvas
         canvas.add(ellipse);
         canvas.setWidth(document.body.scrollWidth);
         canvas.setHeight(250);
      </script>
</body>
</html>

Copier après la connexion

Exemple 2

Passer lockSkewingY comme clé avec une valeur de "true"

Dans cet exemple, nous verrons comment utiliser la propriété lockSkewingY pour arrêter la capacité d'un objet ellipse à s'incliner verticalement. Bien que nous puissions incliner un objet ellipse horizontalement, nous ne sommes pas autorisés à effectuer la même opération verticalement.

<!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>How to lock the vertical skewing of Ellipse using FabricJS?</h2>
      <p>Select the object and stretch it horizontally by pressing the <b>shift</b> key. The object will get skewed. But we have locked its vertical skewing by applying the <b>lockSkewingY</b> property. </p>
      <canvas id="canvas"></canvas>

      <script>
         // Initiate a canvas instance
         var canvas = new fabric.Canvas("canvas");

         // Initiate an ellipse instance
         var ellipse = new fabric.Ellipse({
            left: 115,
            top: 50,
            fill: "white",
            rx: 80,
            ry: 50,
            stroke: "black",
            strokeWidth: 5,
            lockSkewingY: true,
         });

         // Adding it to the canvas
         canvas.add(ellipse);
         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!