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

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

PHPz

Libérer： 2023-09-14 12:49:02

avant

793 Les gens l'ont consulté

如何使用 FabricJS 锁定 Ellipse 的水平倾斜？

Dans ce tutoriel, nous apprendrons comment verrouiller l'inclinaison horizontale 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 horizontalement. Cela peut être fait en utilisant l'attribut lockSkewingX.

Syntaxe

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

Copier après la connexion

Paramètres

Options (facultatif) - Ce paramètre est un objet qui fournit 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 liées à l'objet dont lockSkewingX est la propriété.

Option Key

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

Exemple 1

Comportement par défaut d'Ellipse Objet dans Canvas

Passons en revue un exemple pour comprendre le comportement par défaut de l'objet Ellipse lorsque la propriété lockSkewingX n'est pas utilisée. Vous pouvez incliner un objet horizontalement et verticalement en maintenant la touche Maj enfoncée et 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>Locking the horizontal skewing of Ellipse using FabricJS</h2>
      <p>Select the object. Hold the "shift" and try to stretch the object (not diagonally). You can skew the object both horizontally and vertically. This is the default behavior.</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 lockSkewingX comme clé avec une valeur de "true"

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

<!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 horizontal skewing of Ellipse using FabricJS?</h2>
      <p>Select the object; hold the "shift" key and try to stretch the object horizontally. You cannot skew the object horizontally because we have set <b>lockSkewingX</b> to True. </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,
            lockSkewingX: 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!