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

Wie stelle ich die Polsterung eines Rechtecks mit FabricJS ein?

PHPznach vorne: 2023-09-02 16:49:131267Durchsuche

如何使用 FabricJS 设置矩形的填充？

In diesem Tutorial erfahren Sie, wie Sie mit FabricJS den Abstand eines Rechtecks festlegen. Rechteck ist eine der verschiedenen Formen, die FabricJS bereitstellt. Um ein Rechteck zu erstellen, müssen wir eine Instanz der Klasse fabric.Rect erstellen und sie der Leinwand hinzufügen.

So wie wir die Position, Farbe, Deckkraft und Größe des rechteckigen Objekts auf der Leinwand festlegen können, können wir auch die Füllung des rechteckigen Objekts festlegen. Dies kann mit dem Attribut padding erfolgen.

Syntax

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

Parameter

Optionen (optional) – Dieser Parameter ist ein Objekt, das unserem Rechteck zusätzliche Anpassungen 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.

Option Key

Padding – Diese Eigenschaft akzeptiert einen numerischen Wert. Der angegebene Wert bestimmt den Abstand zwischen dem rechteckigen Objekt und seinem steuernden Begrenzungsrahmen.

Beispiel 1

Standardaussehen Ohne Polsterung

Sehen wir uns ein Codebeispiel an, das zeigt, wie ein rechteckiges Objekt aussieht, 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 Rechteck 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>Default appearance when padding is not used</h2>
   <p>You can select the rectangle to see there is no space between the object and its controlling borders.</p>
   <canvas id="canvas"></canvas>
   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);

      // Initiate a rectangle object
      var rect = new fabric.Rect({
         left: 55,
         top: 90,
         width: 170,
         height: 70,
         fill: "#ffb347",
         stroke: "#191970",
         strokeWidth: 5,
      });

      // Add it to the canvas
      canvas.add(rect);
   </script>
</body>
</html>

Beispiel

Übergabe der Padding-Eigenschaft als Schlüssel

In diesem Beispiel übergeben wir die Padding-Eigenschaft als Schlüssel mit dem Wert 7. Das Gibt an, dass der Abstand zwischen dem rechteckigen Objekt und allen seinen Objekten 7 Pixel beträgt Kontrollieren Sie Grenzen.

<!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>Passing padding property as key</h2>
   <p>You can select the rectangle to see the padding between the object and its controlling borders.</p>
   <canvas id="canvas"></canvas>
   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);

      // Initiate a rectangle object
      var rect = new fabric.Rect({
         left: 55,
         top: 90,
         width: 170,
         height: 70,
         fill: "#ffb347",
         stroke: "#191970",
         strokeWidth: 5,
         padding: 7,
      });

      // Add it to the canvas
      canvas.add(rect);
   </script>
</body>
</html>

Das obige ist der detaillierte Inhalt vonWie stelle ich die Polsterung eines Rechtecks 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：Wie verkette ich zwei Strings in JavaScript, sodass der zweite String am Ende des ersten Strings verkettet werden muss?Nächster Artikel：Wie verkette ich zwei Strings in JavaScript, sodass der zweite String am Ende des ersten Strings verkettet werden muss?

In Verbindung stehende Artikel

Mehr sehen

Wie stelle ich die Polsterung eines Rechtecks ​​mit FabricJS ein?