Heim > Artikel > Web-Frontend > Wie mache ich die Kontrollecken einer Ellipse mit FabricJS transparent?

Wie mache ich die Kontrollecken einer Ellipse mit FabricJS transparent?

WBOYnach vorne: 2023-08-24 18:33:02582Durchsuche

如何使用 FabricJS 使椭圆的控制角透明？

In diesem Tutorial erfahren Sie, wie Sie die Kontrollecken von Ellipse mithilfe von FabricJS transparent machen. Das Oval ist eine der verschiedenen Formen, die FabricJS bereitstellt. Um eine Ellipse zu erstellen, erstellen wir eine Instanz der Fabric.Ellipse-Klasse und fügen sie der Leinwand hinzu. Mit der Eigenschaft „transparentCorners“ können wir die Kontrollecken der Ellipse transparent machen. Syntax

new fabric.Ellipse( { transparentCorners: Boolean }: Object)

Parameter

Optionen (optional) – Dieser Parameter ist ein Objekt, das unserer Ellipse zusätzliche Anpassungen ermöglicht. Mit diesem Parameter können Sie die Farbe, den Cursor, die Strichstärke und viele andere Eigenschaften ändern, die sich auf das Objekt beziehen, dessen Eigenschaft transparentCorners ist.

transparentCorners – Diese Eigenschaft akzeptiert einen Boolean-Wert, der es uns ermöglicht, die Kontrollecken des Objekts transparent darzustellen. Der Standardwert ist True.

Übergabe der Eigenschaft

transparentCorners als Schlüssel mit dem Wert „false“ Sehen wir uns den Code an, der ein Ellipsenobjekt mit undurchsichtigen Kontrollecken erstellt. Um dies zu erreichen, müssen wir einen „falschen“ Wert an die Eigenschaft

transparentCorners

übergeben.

<!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 make controlling corners of Ellipse transparent using FabricJS?</h2>
      <p>Select the object and you will notice that the controlling corners are not transparent. Here we have set the <b>transparentCorners</b> property to False. </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: 100,
            ry: 70,
            fill: "red",
            transparentCorners: false,
         });

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

Beispiel 2

Übergabe von

transparentCorners als Schlüssel mit einem „wahren“ Wert In diesem Beispiel übergeben wir das Attribut

transparentCorners

mit einem „wahren“ Wert. Dadurch wird sichergestellt, dass die Kontrollecken transparent gemacht werden. Beachten Sie, dass dies auch das Standardverhalten ist.

<!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>Making the controlling corners of an Ellipse transparent using FabricJS</h2>
      <p>Select the object and you will notice that its controlling coners are now transparent as we have applied the <b>transparentCorners</b> property. </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: 100,
            ry: 70,
            fill: "red",
            transparentCorners: true,
         });
     
         // Adding it to the canvas
         canvas.add(ellipse);
         canvas.setWidth(document.body.scrollWidth);
         canvas.setHeight(250);
      </script>
   </body>
</html>

Das obige ist der detaillierte Inhalt vonWie mache ich die Kontrollecken einer Ellipse mit FabricJS transparent?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

对象 fabric

Stellungnahme：

Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：Wie erstelle ich Bildelemente dynamisch mit JavaScript?Nächster Artikel：Wie erstelle ich Bildelemente dynamisch mit JavaScript?

In Verbindung stehende Artikel

Mehr sehen