Heim >Web-Frontend >js-Tutorial >Wie verstecke ich den Kontrollrahmen einer Ellipse mit FabricJS?

Wie verstecke ich den Kontrollrahmen einer Ellipse mit FabricJS?

王林nach vorne: 2023-08-24 15:17:04819Durchsuche

如何使用 FabricJS 隐藏椭圆的控制边框？

In diesem Tutorial erfahren Sie, wie Sie mit FabricJS den Kontrollrahmen einer Ellipse ausblenden. 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 die Steuerrahmen auf viele Arten anpassen, z. B. durch Hinzufügen bestimmter Farben, Strichmuster usw. Wir können die Ränder jedoch auch vollständig entfernen, indem wir die hasBorders-Eigenschaft verwenden.

Syntax

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

Parameter

Optionen (optional) – Dieser Parameter ist ein Objekt, das unserer Ellipse zusätzliche Anpassungsmöglichkeiten bietet. Mit diesem Parameter können Sie die Farbe, den Cursor, die Strichstärke und viele andere Eigenschaften ändern, die mit dem Objekt verknüpft sind, dessen hasBorders ein Attribut ist.

Option Key

hasBorders – Diese Eigenschaft akzeptiert einen boolean em>Wenn sie auf False gesetzt ist, werden die Kontrollränder nicht gerendert. Der Standardwert ist True.

Beispiel 1

Die Standarddarstellung des Ellipse-Objektsteuerrahmens

Das folgende Beispiel zeigt die Standarddarstellung des Ellipse-Steuerrahmens. Da der Standardwert der Eigenschaft hasBorders „true“ ist, werden Rahmen gerendert, wenn das Ellipsenobjekt ausgewählt 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>How to hide the controlling borders of an Ellipse using FabricJS?</h2>
      <p>Select the object and you would get to see the controlling borders. This is the default behavior.</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: 105,
            top: 100,
            fill: "white",
            rx: 100,
            ry: 60,
            stroke: "#c154c1",
            strokeWidth: 5,
         });

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

Beispiel 2

hasBorders als Schlüssel übergeben und ihm einen „falschen“ Wert zuweisen

Wenn der >hasBorders-Eigenschaft ein „falscher“ Wert zugewiesen wird, werden die Ränder nicht mehr gerendert. Das bedeutet, dass der Kontrollrahmen ausgeblendet wird, wenn wir das Ellipsenobjekt auswählen.

<!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 hide the controlling borders of an Ellipse using FabricJS?</h2>
      <p>Select the object. Now you won&#39;t get to see the controlling borders because we have set the <b>hasBorders</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: 105,
            top: 100,
            fill: "white",
            rx: 100,
            ry: 60,
            stroke: "#c154c1",
            strokeWidth: 5,
            hasBorders: false,
         });

         // 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 verstecke ich den Kontrollrahmen einer Ellipse mit FabricJS?. 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 öffne ich eine Webcam mit JavaScript?Nächster Artikel：Wie öffne ich eine Webcam mit JavaScript?

In Verbindung stehende Artikel

Mehr sehen