Comment définir le rayon d'un cercle à l'aide de FabricJS ?-js tutoriel-php.cn

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

王林

Libérer： 2023-09-11 09:13:02

avant

916 Les gens l'ont consulté

如何使用 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)

Copier après la connexion

Paramètres

Options (facultatif) - Ce paramètre est un objet< /em> 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>

Copier après la connexion

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>

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!