Heim > Artikel > Web-Frontend > Wie verstecke ich den Kontrollrahmen eines Dreiecks mit FabricJS?

Wie verstecke ich den Kontrollrahmen eines Dreiecks mit FabricJS?

王林nach vorne: 2023-09-01 08:29:05622Durchsuche

如何使用 FabricJS 隐藏三角形的控制边框？

In diesem Tutorial erfahren Sie, wie Sie mit FabricJS den Kontrollrahmen eines Dreiecks ausblenden. Dreieck ist eine der verschiedenen Formen, die FabricJS bereitstellt. Um ein Dreieck zu erstellen, müssen wir eine Instanz der Fabric.Triangle-Klasse 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 Musters usw. Mithilfe des Attributs hasBorders können wir Ränder auch vollständig entfernen.

Syntax

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

Parameter

Optionen (optional)− Dieser Parameter ist ein Objekt, das unserem Dreieck zusätzliche Anpassungen ermöglicht. Mit diesem Parameter können Sie Eigenschaften ändern, die sich auf das Objekt beziehen, für das hasBorders ein Attribut ist, wie z. B. Farbe, Cursor, Strichstärke und viele andere Eigenschaften.

Optionsschlüssel

hasBorders – Diese Eigenschaft akzeptiert einen booleschen-Wert, der beim Rendern von Kontrollrändern hilft. Bei der Einstellung „False“ wird der Kontrollrahmen nicht gerendert. Der Standardwert ist wahr.

Beispiel 1

Das Dreiecksobjekt steuert das Standarderscheinungsbild des Rahmens

Sehen wir uns ein Codebeispiel an, das das Standarderscheinungsbild des Dreiecksrahmens zeigt. Da der Standardwert der hasBorders-Eigenschaft True ist, werden Rahmen gerendert, wenn das Dreiecksobjekt 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 the controlling borders of a triangle object</h2>
   <p>Select the triangle to see its 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 triangle object
      var triangle = new fabric.Triangle({
         left: 105,
         top: 75,
         width: 90,
         height: 80,
         fill: "#ff878d",
         stroke: "#674846",
         strokeWidth: 5,
      });

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

Beispiel 2

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

Wenn die Eigenschaft hasBorders mit dem Wert „False“ angegeben ist, werden Rahmen nicht mehr gerendert. Das bedeutet, dass der Kontrollrahmen ausgeblendet wird, wenn wir das Dreiecksobjekt 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 it "false"</h2>
   <p>Select the triangle and observe that its controlling borders have not been rendered.</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 triangle object
      var triangle = new fabric.Triangle({
         left: 105,
         top: 75,
         width: 90,
         height: 80,
         fill: "#ff878d",
         stroke: "#674846",
         strokeWidth: 5,
         hasBorders: false,
      });

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

Das obige ist der detaillierte Inhalt vonWie verstecke ich den Kontrollrahmen eines Dreiecks 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：Entdecken Sie Best Practices für die Einführung von Komponenten höherer Ordnung in ReactNächster Artikel：Entdecken Sie Best Practices für die Einführung von Komponenten höherer Ordnung in React

In Verbindung stehende Artikel

Mehr sehen