Heim > Web-Frontend > js-Tutorial > Wie stelle ich den Skalierungsfaktor (Rand) eines Kreises mit FabricJS ein?

Wie stelle ich den Skalierungsfaktor (Rand) eines Kreises mit FabricJS ein?

王林
Freigeben: 2023-08-24 15:45:18
nach vorne
760 Leute haben es durchsucht

如何使用 FabricJS 设置圆的比例因子(边框)?

In diesem Tutorial legen wir den Skalierungsfaktor (Rand) eines Kreises mithilfe von FabricJS fest. Kreise sind eine der verschiedenen Formen, die FabricJS bereitstellt. Um einen Kreis zu erstellen, müssen wir eine Instanz der Fabric.Circle-Klasse erstellen und sie der Leinwand hinzufügen. Mit der Eigenschaft borderScaleFactor können wir den Skalierungsfaktor des Objekts angeben, das den Rand steuert.

Syntax

new fabric.Circle({ borderScaleFactor: Number }: Object)
Nach dem Login kopieren

Parameter

  • Optionen (optional) – Dieser Parameter ist ein Objekt < /em>, das unseren Kreisen zusätzliche Anpassungsmöglichkeiten bietet. Mit diesem Parameter können Sie Eigenschaften wie Farbe, Cursor, Strichstärke und viele andere Eigenschaften ändern, die sich auf das Objekt beziehen, dessen borderScaleFactor eine Eigenschaft ist.

  • ul>

    Optionstaste

    • borderScaleFactor− Diese Eigenschaft akzeptiert eine Zahl, die die Rahmenstärke angibt. Der Standardwert ist 1.

    Beispiel 1

    Standardverhalten der Eigenschaft borderScaleFactor< /p>Sehen wir uns ein Beispiel an, das das Standardverhalten der Eigenschaft borderScaleFactor beschreibt. Obwohl wir es in diesem Beispiel angegeben haben, verwendet borderScaleFactor standardmäßig 1, auch wenn es nicht angegeben ist.

    <!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 scale factor (border) of circle using FabricJS</h2>
          <p>Select the object and notice its border. Here we have set <b>borderScaleFactor</b> at 1, which is the default value. </p>
          <canvas id="canvas"></canvas>
    
          <script>
             // Initiate a canvas instance
             var canvas = new fabric.Canvas("canvas");
             var cir = new fabric.Circle({
                left: 215,
                top: 100,
                fill: "white",
                radius: 50,
                stroke: "#c154c1",
                strokeWidth: 5,
                borderColor: "#966fd6",
                borderScaleFactor: 1
             });
    
             // Adding it to the canvas
             canvas.add(cir);
             canvas.setWidth(document.body.scrollWidth);
             canvas.setHeight(250);
          </script>
       </body>
    </html>
    Nach dem Login kopieren

    Beispiel 2

    Übergabe von borderScaleFactor als Schlüssel

    Sehen wir uns den Code an, der die Randstärke eines kreisförmigen Objekts erhöht, wenn sein Rand aktiv ausgewählt wird. In diesem Beispiel haben wir dem

    borderScaleFactor den Wert 5 zugewiesen, der die Dicke des Rahmens angibt.

    <!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 scale factor (border) of a circle using FabricJS</h2>
          <p>Select the object and notice the thickness of its border. Here we have set the <b>borderScaleFactor</b> at 5. </p>
          <canvas id="canvas"></canvas>
    
          <script>
             // Initiate a canvas instance
             var canvas = new fabric.Canvas("canvas");
             var cir = new fabric.Circle({
                left: 215,
                top: 100,
                fill: "white",
                radius: 50,
                stroke: "#c154c1",
                strokeWidth: 5,
                borderColor: "#966fd6",
                borderScaleFactor: 5
             });
    
             // Adding it to the canvas
             canvas.add(cir);
             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 Skalierungsfaktor (Rand) eines Kreises mit FabricJS ein?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:tutorialspoint.com
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage