Wie stelle ich die Deckkraft einer Ellipse mit FabricJS ein?-js-Tutorial-php.cn

Wie stelle ich die Deckkraft einer Ellipse mit FabricJS ein?

WBOY

Freigeben： 2023-08-24 16:09:13

nach vorne

1207 Leute haben es durchsucht

如何使用 FabricJS 设置椭圆的不透明度？

In diesem Tutorial erfahren Sie, wie Sie mit FabricJS die Deckkraft einer Ellipse festlegen. Das Oval ist eine der verschiedenen Formen, die FabricJS bereitstellt. Um eine Ellipse zu erstellen, müssen wir eine Instanz der Fabric.Ellipse-Klasse erstellen und sie der Leinwand hinzufügen. Wir können das Ellipsenobjekt anpassen, indem wir eine Füllfarbe hinzufügen, seine Ränder entfernen und sogar seine Abmessungen ändern. Ebenso können wir die Eigenschaft opacity verwenden, um ihre Deckkraft zu ändern.

Syntax

new fabric.Ellipse({ opacity: Number }: Object)

Nach dem Login kopieren

Parameter

Optionen (optional) – Dieser Parameter ist ein Objekt< /em>, das unserer Ellipse zusätzliche Anpassungsmöglichkeiten bietet. Mit diesem Parameter können Sie die Farbe, den Cursor, die Rahmenbreite und viele andere Eigenschaften ändern, die sich auf das Objekt beziehen, dessen Deckkraft ein Attribut ist.

Optionsschlüssel

Opacity – Diese Eigenschaft akzeptiert eine Zahl, mit der wir die Deckkraft des Objekts steuern können. Der Standardwert der Eigenschaft opacity ist 1.

Beispiel 1

Standardaussehen des Ellipsenobjekts< /strong>

Sehen wir uns einen Codeausschnitt an, um zu sehen, wie unser Ellipsenobjekt mit dem Standardwert der Eigenschaft opacity aussieht. In diesem Beispiel übergeben wir keinen Opazitätsschlüssel an die Klasse, wie unten gezeigt –

<!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 opacity of Ellipse using FabricJS?</h2>
      <p>Observe that here we have not used the <b>opacity</b> property, so by default, it takes the value 1. </p>
      <canvas id="canvas"></canvas>

      <script>
         // Initiate a canvas instance
         var canvas = new fabric.Canvas("canvas");

         // Initiate an ellipse instance
         var ellipse = new fabric.Ellipse({
            left: 115,
            top: 50,
            rx: 80,
            ry: 50,
            fill: "#ff1493",
         });

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

Nach dem Login kopieren

Beispiel 2

Übergeben des Attributs opacity als Schlüssel

In diesem Beispiel werden wir sehen, wie der Wert opacity zugewiesen wird Die Eigenschaft ändert die Deckkraft des Ellipsenobjekts im Canvas. Hier verwenden wir 0,3 als Deckkraft, wodurch unser Ellipsenobjekt halbtransparent und nicht vollständig undurchsichtig erscheint.

<!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 opacity of Ellipse using FabricJS?</h2>
      <p>Here we have set the <b>opacity</b> at 0.3, which is why the ellipse is less opaque.</p>
      <canvas id="canvas"></canvas>

      <script>
         // Initiate a canvas instance
         var canvas = new fabric.Canvas("canvas");

         // Initiate an ellipse instance
         var ellipse = new fabric.Ellipse({
            left: 115,
            top: 50,
            rx: 80,
            ry: 50,
            fill: "#ff1493",
            opacity: 0.3,
         });

         // Adding it to the canvas
         canvas.add(ellipse);
         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 Deckkraft einer Ellipse mit FabricJS ein?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!