suchen

Heim >Web-Frontend >js-Tutorial >Wie verstecke ich den Kontrollrahmen eines Rechtecks ​​mit FabricJS?

Wie verstecke ich den Kontrollrahmen eines Rechtecks ​​mit FabricJS?

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBnach vorne
2023-08-23 15:49:021123Durchsuche

Wie verstecke ich den Kontrollrahmen eines Rechtecks ​​mit FabricJS?

In diesem Tutorial erfahren Sie, wie Sie mit FabricJS den Kontrollrahmen eines Rechtecks ​​ausblenden. Rechteck ist eine der verschiedenen Formen, die FabricJS bereitstellt. Um ein Rechteck zu erstellen, müssen wir eine Instanz der Klasse fabric.Rect erstellen und sie der Leinwand hinzufügen.

Wir können den Kontrollrahmen auf viele Arten anpassen, z. B. durch Hinzufügen einer bestimmten Farbe, eines gepunkteten Linienmusters usw. Wir können die Ränder jedoch auch vollständig entfernen, indem wir die hasBorders-Eigenschaft verwenden.

Syntax

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

Parameter

  • Optionen (optional) − Dieser Parameter ist ein Objekt, das verwendet wird, um zusätzliche Anpassungen für das Rechteck bereitzustellen. Mit diesem Parameter können Sie die Farbe, den Cursor, die Strichstärke und viele andere Eigenschaften ändern, die sich auf Objekte mit Randeigenschaften beziehen.

Optionsschlüssel

  • hasBorders − Diese Eigenschaft akzeptiert einen booleschen Wert. Wenn sie auf „false“ gesetzt ist, werden die Kontrollränder nicht gerendert. Es hilft beim Rendern von Kontrollrändern. Der Standardwert ist wahr.

Beispiel 1

Das Standardaussehen des Kontrollrahmens eines rechteckigen Objekts

Sehen wir uns ein Codebeispiel an, das das Standardaussehen des Kontrollrahmens eines Rechtecks ​​zeigt. Da der Standardwert der hasBorders-Eigenschaft True ist, werden Rahmen gerendert, wenn ein rechteckiges 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>Default appearance of controlling borders of a rectangle object</h2>
   <p>Select the rectangle to see the default appearance of controlling borders</p>
   <canvas id="canvas"></canvas>
   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
     
      // Initiate a rectangle object
      var rect = new fabric.Rect({
         left: 125,
         top: 90,
         width: 170,
         height: 70,
         strokeWidth: 3,
         stroke: "#4169e1",
         fill: "grey",
         padding: 15,
      });

      // Add it to the canvas
      canvas.add(rect);
   </script>
</body>
</html>

Beispiel 2

Verwenden Sie hasBorders als Schlüssel und weisen Sie ihm den Wert „false“ zu.

Wenn der hasBorders-Eigenschaft ein falscher Wert zugewiesen wird, wird der Rahmen nicht mehr gerendert. Das bedeutet, dass der Kontrollrahmen ausgeblendet wird, wenn wir das rechteckige 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>Passing hasBorders as key and assigning a False value to it</h2>
   <p>Select the rectangle to see that the controlling borders have now been hidden</p>
   <canvas id="canvas"></canvas>
   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);

      // Initiate a rectangle object
      var rect = new fabric.Rect({
         left: 125,
         top: 90,
         width: 170,
         height: 70,
         strokeWidth: 3,
         stroke: "#4169e1",
         fill: "grey",
         padding: 15,
         hasBorders: false,
      });

      // Add it to the canvas
      canvas.add(rect);
   </script>
</body>
</html>

Das obige ist der detaillierte Inhalt vonWie verstecke ich den Kontrollrahmen eines Rechtecks ​​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：Berechnen Sie mögliche arithmetische Folgen in einem Array in JavaScriptNächster Artikel：Berechnen Sie mögliche arithmetische Folgen in einem Array in JavaScript

In Verbindung stehende Artikel

Mehr sehen