Maison > interface Web > js tutoriel > Comment verrouiller l'inclinaison verticale d'un cercle à l'aide de FabricJS ?

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

WBOY
Libérer: 2023-08-30 12:09:04
avant
1395 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!

source:tutorialspoint.com
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal