Heim > Artikel > Web-Frontend > FabricJS - Wie stelle ich die Farbe der Ecken der Liniensteuerung ein?

FabricJS - Wie stelle ich die Farbe der Ecken der Liniensteuerung ein?

王林nach vorne: 2023-09-09 21:57:021478Durchsuche

FabricJS – 如何设置线条控制角的颜色？

In diesem Tutorial erfahren Sie, wie Sie mit FabricJS die Farbe einer Linienkontrollecke festlegen. Das Linienelement ist eines der Grundelemente, die in FabricJS bereitgestellt werden. Es wird verwendet, um gerade Linien zu erstellen. Da Linienelemente geometrisch eindimensional sind und keine Innenräume enthalten, werden sie nie gefüllt. Wir können ein Linienobjekt erstellen, indem wir eine Instanz von fabric.Line erstellen, die X- und Y-Koordinaten der Linie angeben und sie der Leinwand hinzufügen. Mit der Eigenschaft „cornerColor“ können wir die Farbe der Kontrollecken manipulieren, während das Objekt aktiv ist. Grammatik

new fabric.Line( points: Array, { cornerColor: String }: Object)

Parameter

Punkte – Dieser Parameter akzeptiert ein Array von Punkten, das die Werte (x1, y1) und (x2, y2) bestimmt, bei denen es sich um die x-Achsen- und y-Achsen-Koordinaten von Anfang und Ende handelt Punkte der Linie bzw.
Optionen (optional) – Dieser Parameter ist ein Objekt , das für unsere Zwecke nützlich ist. 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 Eigenschaft cornerColor ist.

cornerColor – Diese Eigenschaft akzeptiert einen String, der es uns ermöglicht, der Ecke eine Farbe zuzuweisen, um den Eckpunkt zu steuern, wenn das Objekt aktiv ausgewählt wird. Der Standardwert ist rgb(178.204.255).

cornerColor

als Schlüssel und den Farbnamen als Wert Beispiel

Sehen wir uns ein Codebeispiel an, das die Eigenschaft

cornerColor

verwendet, um die Farbe zu ändern. In diesem Beispiel haben wir der Taste den Wert „Orange“ zugewiesen, wodurch die Ecken der Steuerelemente orange angezeigt werden.

<!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 cornerColor as key with a color name as value</h2>
   <p>
      You can select the line object to see that the corner colour is orange
   </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 Line object
      var line = new fabric.Line([200, 100, 100, 40], {
         stroke: "blue",
         strokeWidth: 20,
         cornerColor: "orange"
      });

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

Weisen Sie dem Attribut

cornerColor

einen RGBA-Wert zu Beispiel

Wir können auch einen RGBA-Wert zuweisen, anstatt dem Schlüssel einen einfachen Farbnamen als

String

-Wert zu übergeben. RGBA steht für Rot, Grün, Blau und Alpha, wobei Alpha für die Deckkraft steht. Schauen wir uns ein Codebeispiel an, um zu veranschaulichen, wie das geht.

<!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>Assigning an RGBA value to the cornerColor property</h2>
   <p>
      You can select the line object to see the corner colour
   </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 Line object
      var line = new fabric.Line([200, 100, 100, 40], {
         stroke: "blue",
         strokeWidth: 20,
         cornerColor: "rgba(255,69,0, 0.8)",
      });

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

Das obige ist der detaillierte Inhalt vonFabricJS - Wie stelle ich die Farbe der Ecken der Liniensteuerung ein?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

String Array 值传递对象 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 stelle ich mit FabricJS den Neigungswinkel der Y-Achse eines Rechtecks ein?Nächster Artikel：Wie stelle ich mit FabricJS den Neigungswinkel der Y-Achse eines Rechtecks ein?

In Verbindung stehende Artikel

Mehr sehen