Heim >Web-Frontend >js-Tutorial >Wie stelle ich die Deckkraft des Rahmens ein, wenn ich ein Rechteck mit FabricJS verschiebe?

Wie stelle ich die Deckkraft des Rahmens ein, wenn ich ein Rechteck mit FabricJS verschiebe?

PHPznach vorne: 2023-08-25 10:17:07776Durchsuche

In diesem Tutorial legen wir die Randdeckkraft eines Rechtecks beim Verschieben fest FabricJS. Rechteck ist eine der verschiedenen Formen, die FabricJS bereitstellt. für Um ein Rechteck zu erstellen, müssen wir eine Instanz der Fabric.Rect-Klasse erstellen und diese hinzufügen Leinwand.

Wir können die Eigenschaft borderOpacityWhenMoving verwenden, um die Deckkraft eines Rechtecks zu ändern, wenn es auf der Leinwand verschoben wird.

Syntax

new fabric.Rect({ borderOpacityWhenMoving: 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 wie Farbe, Cursor, Strichstärke und viele andere Eigenschaften ändern, die sich auf das Objekt beziehen, dessen borderOpacityWhenMoving eine Eigenschaft ist.

Optionstaste

borderOpacityWhenMoving – Diese Eigenschaft akzeptiert eine Zahl, die den Grad der Deckkraft angibt, der beim Verschieben des Rechtecks gleich bleiben soll. Damit können wir die Deckkraft des Randes steuern, wenn wir das rechteckige Objekt verschieben. Der Standardwert ist 0,4.

Beispiel 1

Anzeige des Standardverhaltens der Eigenschaft borderOpacityWhenMoving

Sehen wir uns ein Codebeispiel an, das das Standardverhalten der Eigenschaft boderOpacityWhenMoving zeigt. Wenn wir das rechteckige Objekt auswählen und verschieben Im Bereich der Leinwand ändert sich die Deckkraft des Auswahlrahmens von 1 (völlig undurchsichtig) auf 0,4 Dadurch wirkt es etwas durchscheinend.

<!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>Displaying the default behaviour of borderOpacityWhenMoving property</h2>
   <p>Move the rectangle to see the default behaviour of <b>borderOpacityWhenMoving</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",
      });

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

Beispiel 2

Übergabe von borderOpacityWhenMoving als Schlüssel

Sehen wir uns ein Codebeispiel für die Zuweisung eines Werts zur Eigenschaft borderOpacityWhenMoving an. In diesem Beispiel geben wir den Wert als 0 an. Es sagt uns, dass sich die Deckkraft des Randes auf 0 ändert und unsichtbar wird, wenn wir das Rechteck verschieben.

<!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 borderOpacityWhenMoving as key</h2>
   <p>Move the rectangle to see the change in value of <b>borderOpacityWhenMoving</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",
         borderOpacityWhenMoving: 0,
      });
     
       // Add it to the canvas
      canvas.add(rect);
   </script>
</body>
</html>

Das obige ist der detaillierte Inhalt vonWie stelle ich die Deckkraft des Rahmens ein, wenn ich ein Rechteck mit FabricJS verschiebe?. 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 kann ich mit FabricJS die Größe eines Objekts anhand der Ecken ungleichmäßig ändern?Nächster Artikel：Wie kann ich mit FabricJS die Größe eines Objekts anhand der Ecken ungleichmäßig ändern?

In Verbindung stehende Artikel

Mehr sehen