Maison > Article > interface Web > Comment définir le rayon d'un cercle à l'aide de FabricJS ?

Comment définir le rayon d'un cercle à l'aide de FabricJS ?

王林avant: 2023-09-11 09:13:02938parcourir

如何使用 FabricJS 设置圆的半径？

Dans ce tutoriel, nous apprendrons comment définir le rayon d'un cercle à l'aide de FabricJS. Nous pouvons spécifier la position, la couleur, l'opacité et la taille de l'objet circulaire dans le canevas, mais nous devons d'abord spécifier le rayon du cercle que nous voulons afficher. Cela peut être fait en utilisant l'attribut radius.

Syntaxe

new fabric.Circle({ radius : Number }: Object)

Paramètres

Options (facultatif) - Ce paramètre est un objet qui fournit une personnalisation supplémentaire pour nos cercles. En utilisant ce paramètre, vous pouvez modifier des propriétés telles que la couleur, le curseur, la largeur du trait et bien d'autres propriétés liées à l'objet dont rayon est la propriété.

Clé d'option

Radius− Cette propriété accepte une valeur numéro. La valeur attribuée détermine le rayon du cercle.

Exemple 1

Passer la propriété radius comme clé

Regardons un exemple de définition du rayon d'un cercle dans FabricJS. Dans cet exemple, nous avons spécifié une valeur de 50 pour la propriété radius, créant ainsi un cercle d'un rayon de 50 px de large. Des valeurs décimales peuvent également être ajoutées.

<!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 the radius of a circle using FabricJS</h2>
      <p>Here we have set the <b>radius</b> at 50px. </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,
            radius: 50,
            fill: "#85bb65"
         });
         canvas.add(circle);
         canvas.setWidth(document.body.scrollWidth);
         canvas.setHeight(250);
      </script>
   </body>
</html>

Exemple 2

Transmettez la valeur sous forme d'expression au lieu d'une seule valeur numérique

En plus de transmettre une seule valeur numérique, vous pouvez également attribuer une expression à la propriété radius. Dans cet exemple, nous avons utilisé l'expression : [(30 * 3) + 10] , qui vaut 100, donc le rayon du cercle est de 100px.

<!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 the radius of a circle using FabricJS</h2>
      <p>Here we have set the radius at 100px, but instead of passing a single numerical value, we have used an expression [(30*3)+10].</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,
            radius: (30 * 3) + 10,
            fill: "#ffa500"
         });
         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!

值传递对象

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Comment calculer le GCD de deux nombres/tableaux ou plus en JavaScript ?Article suivant：Comment calculer le GCD de deux nombres/tableaux ou plus en JavaScript ?

Articles Liés

Voir plus