suchen

Heim >Web-Frontend >js-Tutorial >Wie stelle ich den Randskalierungsfaktor eines Rechtecks ​​mit FabricJS ein?

Wie stelle ich den Randskalierungsfaktor eines Rechtecks ​​mit FabricJS ein?

WBOY
WBOYnach vorne
2023-08-25 08:05:021409Durchsuche

Wie stelle ich den Randskalierungsfaktor eines Rechtecks ​​mit FabricJS ein?

In diesem Tutorial legen wir den Randskalierungsfaktor eines Rechtecks ​​​​mit FabricJS fest. Rechteck ist eine der verschiedenen Formen, die FabricJS bereitstellt. Um ein Rechteck zu erstellen, müssen wir eine Instanz der fabric.Rect-Klasse erstellen und sie der Leinwand hinzufügen.

Wir können das Attribut borderScaleFactor verwenden, um den Skalierungsfaktor des Kontrollrahmens des Objekts anzugeben.

Syntax

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

Parameter

  • Optionen (optional) – Dieser Parameter ist ein Objekt, das eine zusätzliche Anpassung des Rechtecks ​​ermöglicht. Mit diesem Parameter können Sie die Farbe, den Cursor, die Strichstärke und viele andere Eigenschaften des Objekts im Zusammenhang mit der Eigenschaft borderScaleFactor ändern.

Optionstaste

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

Beispiel 1

Standardverhalten der Eigenschaft borderScaleFactor

Sehen wir uns ein Codebeispiel an, das das Standardverhalten der Eigenschaft borderScaleFactor beschreibt. Obwohl wir ihn in diesem Beispiel angegeben haben, ist der von borderScaleFactor verwendete Standardwert immer noch 1, wenn er nicht angegeben wird. 

<!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 behaviour of borderScaleFactor property</h2>
   <p>Select the rectangle to see the default value of <b>borderScaleFactor</b></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: 125,
         top: 90,
         width: 170,
         height: 70,
         fill: "#cf1020",
         padding: 9,
         borderColor: "black",
         borderScaleFactor: 1,
      });

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

Beispiel 2

Übergabe von borderScaleFactor als Schlüssel

Schauen wir uns ein Codebeispiel an, um die Randstärke eines rechteckigen Objekts zu erhöhen, wenn seine Auswahl aktiviert ist. In diesem Beispiel weisen wir borderScaleFactor den Wert 5 zu, der die Dicke unseres 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>Passing borderScaleFactor as key</h2>
   <p>Select the rectangle to see the changed value of <b>borderScaleFactor</b></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: 125,
         top: 90,
         width: 170,
         height: 70,
         fill: "#cf1020",
         padding: 9,
         borderColor: "black",
         borderScaleFactor: 5,
      });

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

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

Stellungnahme：
Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen
Vorheriger Artikel：Wie füge ich mithilfe von JavaScript dynamisch eine ID in ein Tabellenelement ein?Nächster Artikel：Wie füge ich mithilfe von JavaScript dynamisch eine ID in ein Tabellenelement ein?

In Verbindung stehende Artikel

Mehr sehen