FabricJS – Wie stelle ich die Größe des Kontrollwinkels einer Linie ein?-js-Tutorial-php.cn

FabricJS – Wie stelle ich die Größe des Kontrollwinkels einer Linie ein?

WBOY

Freigeben： 2023-08-25 12:21:14

nach vorne

1033 Leute haben es durchsucht

FabricJS – 如何设置线的控制角的大小？

In diesem Tutorial erfahren Sie, wie Sie mit FabricJS die Größe einer Linienkontrollecke festlegen. Die Kontrollecken eines Objekts ermöglichen es uns, seine Position zu skalieren, zu strecken oder zu ändern. Wir können die Kontrollecke auf viele Arten anpassen, z. B. indem wir ihr eine bestimmte Farbe hinzufügen, ihre Größe ändern usw. Wir können die Größe mithilfe der Eigenschaft cornerSize ändern. p>

Syntax

 new fabric.Line( points: Array, { cornerSize: Number }: Object)

Nach dem Login kopieren

Parameter

Punkte – Dieser Parameter akzeptiert ein Array von Punkten, das die Werte (x1, y1) und (x2, y2) bestimmt, die die Start- und Endpunkte von sind die Linie bzw. die x-Achsen-Koordinate und die y-Achsen-Koordinate.
Optionen (optional) – Dieser Parameter ist ein Objekt, das unserem Objekt zusätzliche Anpassungen ermöglicht. Mit diesem Parameter können Sie den Ursprung des Objekts, die Strichstärke und viele andere Eigenschaften im Zusammenhang mit der Eigenschaft cornerSize ändern.

Optionstasten

cornerSize – Diese Eigenschaft akzeptiert eine Zahl, die es uns ermöglicht, die Größe der Kontrollecken des ausgewählten Objekts zu manipulieren. Der Standardwert ist 13.

Standardgröße der Kontrollecken

Beispiel

Sehen wir uns ein Beispiel an, das die Standardgröße der Kontrollecken beschreibt, wenn ein Linienobjekt aktiv 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 size of the controlling corners</h2>
   <p>You can select the line object to see the default size of controlling corners</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,
      });
      
      // Add it to the canvas
      canvas.add(line);
   </script>
</body>
</html>

Nach dem Login kopieren

Übergeben Sie cornerSize als Schlüssel mit benutzerdefiniertem Wert

Beispiel

In diesem Beispiel übergeben wir das Attribut cornerSize als Schlüssel mit dem Wert 17. Wir können das sehen, wenn das Linienobjekt ausgewählt ist.

<!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 cornerSize as key with a custom value</h2>
   <p>You can select the line object to see the size of controlling corners</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: "#87a96b",
         cornerSize: 17,
      });
      
      // Add it to the canvas
      canvas.add(line);
   </script>
</body>
</html>

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonFabricJS – Wie stelle ich die Größe des Kontrollwinkels einer Linie ein?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!