Heim > Artikel > Web-Frontend > Wie stelle ich die Polsterung eines Kreises mit FabricJS ein?

Wie stelle ich die Polsterung eines Kreises mit FabricJS ein?

WBOYnach vorne: 2023-08-25 10:45:051037Durchsuche

如何使用 FabricJS 设置圆的填充？

In diesem Tutorial erfahren Sie, wie Sie mit FabricJS die Polsterung eines Kreises festlegen. 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. So wie wir die Position, Farbe, Deckkraft und Größe eines kreisförmigen Objekts innerhalb der Leinwand festlegen können, können wir auch die Füllung des kreisförmigen Objekts festlegen. Dies kann mit dem Attribut padding erfolgen.

Syntax

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

Parameter

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

Optionstaste

Padding – Diese Eigenschaft akzeptiert einen numerischen Wert. Der zugewiesene Wert bestimmt den Abstand zwischen dem kreisförmigen Objekt und seinem steuernden Begrenzungsrahmen.

Beispiel 1

Standarddarstellung, wenn die Auffüllung nicht verwendet wird

Sehen wir uns den Code an, der die Darstellung eines kreisförmigen Objekts anzeigt, wenn das Attribut padding nicht verwendet wird. Wie wir sehen können, gibt es zwischen dem Objekt und seinen umgebenden Kontrollgrenzen keinen Raum. Dies bedeutet, dass zwischen dem Kreis und seinem steuernden Begrenzungsrahmen kein Abstand vorhanden 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 padding of circle using FabricJS</h2>
      <p>Select the object and observe that there is no space between the object and its surrounding controlling borders. This is the default behavior. We haven&#39;t used any <b>padding</b> here. </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>

Beispiel 2

Übergabe der Padding-Eigenschaft als Schlüssel

In diesem Beispiel übergeben wir die Padding-Eigenschaft als Schlüssel mit dem Wert 7. Das bedeutet, dass der Abstand zwischen dem kreisförmigen Objekt und allen seinen Kontrollrändern 7 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 padding of circle using FabricJS</h2>
      <p>Select the object and notice the padding between the object and its controlling border. Here we have set the <b>padding</b> at 10px.</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,
            padding: 10,
            radius: 50,
            fill: "#85bb65"
         });
         canvas.add(circle);
         canvas.setWidth(document.body.scrollWidth);
         canvas.setHeight(250);
      </script>
   </body>
</html>

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

对象内边距 padding fabric

Stellungnahme：

Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：Bilden Sie erforderliche Attribute mithilfe benutzerdefinierter Validierungsnachrichten in HTML5Nächster Artikel：Bilden Sie erforderliche Attribute mithilfe benutzerdefinierter Validierungsnachrichten in HTML5

In Verbindung stehende Artikel

Mehr sehen