Wie stelle ich die Randdeckkraft eines Kreises beim Verschieben mit FabricJS ein?-js-Tutorial-php.cn

Wie stelle ich die Randdeckkraft eines Kreises beim Verschieben mit FabricJS ein?

王林

Freigeben： 2023-08-24 14:53:02

nach vorne

848 Leute haben es durchsucht

如何使用 FabricJS 在移动时设置圆的边框不透明度？

In diesem Tutorial verwenden wir FabricJS, um die Randopazität eines Kreises beim Verschieben festzulegen. 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. Wir können die Eigenschaft borderOpacityWhenMoving verwenden, um die Deckkraft des Kreises zu ändern, während er sich auf der Leinwand bewegt.

Syntax

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

Nach dem Login kopieren

Parameter

Optionen (optional) – Dieser Parameter ist ein Objekt< /em>, das zusätzliche Anpassungen für unsere Kreise 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 angibt, wie undurchsichtig der Rand beim Verschieben des Kreises sein soll. Damit können wir die Deckkraft des Randes steuern, wenn wir das kreisförmige Objekt verschieben. Der Standardwert ist 0,4.

Beispiel 1

Anzeige des Standardverhaltens der Eigenschaft borderOpacityWhenMoving

Sehen wir uns ein Beispiel an, das das Standardverhalten der Eigenschaft boderOpacityWhenMoving zeigt. Wenn wir das Kreisobjekt auswählen und auf der Leinwand verschieben, ändert sich die Deckkraft des Auswahlrahmens von 1 (völlig undurchsichtig) auf 0,4, wodurch es etwas durchscheinend aussieht.

<!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 border opacity of Circle while moving using FabricJS</h2>
      <p>Select the object and move it around. Notice that the opacity of the outline border reduces slightly while moving the object. This is the default behavior. Here we have not used the <b>boderOpacityWhenMoving</b> property.</p>
      <canvas id="canvas"></canvas>

      <script>
         // Initiate a canvas instance
         var canvas = new fabric.Canvas("canvas");
         var cir = new fabric.Circle({
            left: 215,
            top: 100,
            fill: "",
            radius: 50,
            stroke: "#c154c1",
            strokeWidth: 5,
            borderColor: "#966fd6",
         });

         // Adding it to the canvas
         canvas.add(cir);
         canvas.setWidth(document.body.scrollWidth);
         canvas.setHeight(250);
      </script>
   </body>
</html>

Nach dem Login kopieren

Beispiel 2

Übergabe von borderOpacityWhenMoving als Schlüssel

Sehen wir uns ein Beispiel für die Zuweisung eines Werts zur Eigenschaft borderOpacityWhenMoving an. In diesem Beispiel geben wir den Wert als 0 an. Dies sagt uns, dass sich die Deckkraft des Randes auf 0 ändert und unsichtbar wird, wenn wir den Kreis 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>How to set the border opacity of Circle while moving using FabricJS?</h2>
      <p>Select the object and move it around. You will notice that the border opacity becomes 0 when moving the object. Here we have set <b>borderOpacityWhenMoving</b> to 0.</p>
      <canvas id="canvas"></canvas>

      <script>
         // Initiate a canvas instance
         var canvas = new fabric.Canvas("canvas");
         var cir = new fabric.Circle({
            left: 215,
            top: 100,
            fill: "",
            radius: 50,
            stroke: "#c154c1",
            strokeWidth: 5,
            borderColor: "#966fd6",
            borderOpacityWhenMoving: 0,
         });

         // Adding it to the canvas
         canvas.add(cir);
         canvas.setWidth(document.body.scrollWidth);
         canvas.setHeight(250);
      </script>
   </body>
</html>

Nach dem Login kopieren

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