Wie stelle ich den Randskalierungsfaktor eines Rechtecks mit FabricJS ein?-js-Tutorial-php.cn

Wie stelle ich den Randskalierungsfaktor eines Rechtecks mit FabricJS ein?

WBOY

Freigeben： 2023-08-25 08:05:02

nach vorne

1408 Leute haben es durchsucht

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)

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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!