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

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

WBOY

Libérer： 2023-08-30 12:09:04

avant

1338 Les gens l'ont consulté

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

Dans ce tutoriel, nous apprendrons comment verrouiller l'inclinaison verticale d'un cercle à l'aide de FabricJS. Tout comme nous pouvons spécifier la position, la couleur, l'opacité et la taille d'un objet circulaire 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.Circle({ lockSkewingY : Boolean }: Object)

Copier après la connexion

Paramètres

Options (facultatif) - Ce paramètre est un objet< /em> qui offre une personnalisation supplémentaire pour nos cercles. En utilisant ce paramètre, vous pouvez modifier les propriétés liées à l'objet pour lequel lockSkewingY est un attribut, telles que la couleur, le curseur, la largeur du trait et de nombreuses autres propriétés.

Option Key

lockSkewingY - Cette propriété accepte une valeur booléenne< /strong>. Si on lui donne une valeur "vraie", l'inclinaison verticale de l'objet sera verrouillée.

Exemple 1

Comportement par défaut d'un objet Circle dans un canevas

Regardons un exemple de code pour comprendre le comportement par défaut d'un objet Circle 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>Locking the vertical skewing of a circle using FabricJS</h2>
      <p>Select the object, hold the <b>shift</b> key, and stretch it horizontally or vertically. The object will get skewed freely. This is the default behavior. Here we have not applied the <b>lockSkewingY</b> property, but by default, it is set to False. </p>
      <canvas id="canvas"></canvas>

      <script>
         // Initiate a canvas instance
         var canvas = new fabric.Canvas("canvas");
         var circle = new fabric.Circle({
            left: 115,
            top: 50,
            fill: "white",
            radius: 50,
            stroke: "black",
            strokeWidth: 5
         });

         // Adding it to the canvas
         canvas.add(circle);
         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 arrêter la capacité d'un cercle à incliner un objet verticalement à l'aide de la propriété lockSkewingY. Comme nous pouvons le voir, même si nous pouvons incliner un objet circulaire horizontalement en appuyant sur la Touche Maj, nous ne sommes pas autorisés à faire la même chose 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 vertical skewing of a circle using FabricJS</h2>
      <p>Select the object, hold the <b>shift</b> key, and try to stretch the circle horizontally or vertically. You will notice that the object gets skewed horizontally, but its vertical skewing is locked. Here we have set <b>lockSkewingY</b> to True. </p>
      <canvas id="canvas"></canvas>

      <script>
         // Initiate a canvas instance
         var canvas = new fabric.Canvas("canvas");
         var circle = new fabric.Circle({
            left: 115,
            top: 50,
            fill: "white",
            radius: 50,
            stroke: "black",
            strokeWidth: 5,
            lockSkewingY: true
         });
   
         // Adding it to the canvas
         canvas.add(circle);
         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!