Wie stelle ich den Radius eines Kreises mit FabricJS ein?-js-Tutorial-php.cn

Wie stelle ich den Radius eines Kreises mit FabricJS ein?

王林

Freigeben： 2023-09-11 09:13:02

nach vorne

945 Leute haben es durchsucht

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

In diesem Tutorial lernen wir, wie man mit FabricJS den Radius eines Kreises festlegt. Wir können die Position, Farbe, Deckkraft und Größe des kreisförmigen Objekts auf der Leinwand festlegen, aber zuerst müssen wir den Radius des Kreises angeben, den wir anzeigen möchten. Dies kann mithilfe des Radius-Attributs erfolgen.

Syntax

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

Nach dem Login kopieren

Parameter

Optionen (optional) – Dieser Parameter ist ein Objekt< /em>, das zusätzliche Anpassungen für unsere Kreise ermöglicht. Mit diesem Parameter können Sie Eigenschaften wie Farbe, Cursor, Strichstärke und viele andere Eigenschaften ändern, die sich auf das Objekt beziehen, dessen Radius die Eigenschaft ist.

Optionsschlüssel

Radius− Diese Eigenschaft akzeptiert einen Zahlenwert. Der zugewiesene Wert bestimmt den Radius des Kreises.

Beispiel 1

Übergabe der radiusEigenschaft als Schlüssel

Sehen wir uns ein Beispiel für die Festlegung des Radius eines Kreises in FabricJS an. In diesem Beispiel haben wir für die Radiuseigenschaft einen Wert von 50 angegeben und so einen Kreis mit einem Radius von 50 Pixel Breite erstellt. Es können auch Dezimalwerte addiert werden.

<!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>

Nach dem Login kopieren

Beispiel 2

Übergeben Sie den Wert als Ausdruck anstelle eines einzelnen numerischen Werts

Zusätzlich zur Übergabe eines einzelnen numerischen Werts können Sie der Radiuseigenschaft auch einen Ausdruck zuweisen. In diesem Beispiel haben wir den Ausdruck [(30 * 3) + 10] verwendet, der 100 ergibt, sodass der Radius des Kreises 100 Pixel beträgt.

<!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>

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonWie stelle ich den Radius eines Kreises mit FabricJS ein?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!