Heim > Artikel > Web-Frontend > Wie verstecke ich den Kontrollrand eines Kreises mit FabricJS?

Wie verstecke ich den Kontrollrand eines Kreises mit FabricJS?

PHPznach vorne: 2023-08-24 09:21:121384Durchsuche

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

In diesem Tutorial erfahren Sie, wie Sie mit FabricJS den Kontrollrahmen eines Kreises ausblenden. Kreise sind eine der verschiedenen Formen, die FabricJS bereitstellt. Um einen Kreis zu erstellen, erstellen wir eine Instanz der Fabric.Circle-Klasse und fügen sie der Leinwand hinzu. 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.Circle({ hasBorders: Boolean }: Object)

Parameter

Optionen (optional) – Dieser Parameter ist ein Objekt, das zusätzliche Anpassungen für unsere Kreise ermöglicht. Mit diesem Parameter können Sie die Farbe, den Cursor, die Strichstärke und andere Eigenschaften im Zusammenhang mit dem Objekt mit hasBorders als Attribut ändern.

Optionsschlüssel

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

Beispiel 1

Das Kreisobjekt steuert die Standarddarstellung des Rahmens.

Schauen wir uns einen Code an, der die Standarddarstellung des Steuerkreisrands zeigt. Da der Standardwert der Eigenschaft hasBorders True ist, werden Ränder gerendert, wenn ein kreisförmiges Objekt 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>Hiding the controlling borders of a circle using FabricJS</h2>
      <p>Select the object and notice its controlling borders. This is the default appearance. Although we have not used the <b>hasBorders</b> property, it is by default set to True.</p>
      <canvas id="canvas"></canvas>

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

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

Beispiel 2

HasBorders als Schlüssel übergeben und ihm den Wert „false“ zuweisen

Wenn der Eigenschaft hasBorders der Wert False zugewiesen wird, werden Ränder nicht mehr gerendert. Das bedeutet, dass der Kontrollrahmen ausgeblendet wird, wenn wir das kreisförmige Objekt 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>Hiding the controlling borders of a circle using FabricJS</h2>
      <p>Select the object and now you will no longer be able to see its controlling borders, as we have set <b>hasBorders</b> as False.</p>
      <canvas id="canvas"></canvas>

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

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

Das obige ist der detaillierte Inhalt vonWie verstecke ich den Kontrollrand eines Kreises mit FabricJS?. 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：Implementierung von LinkedList in JavascriptNächster Artikel：Implementierung von LinkedList in Javascript

In Verbindung stehende Artikel

Mehr sehen