Wie legt man mit FabricJS Stile fest, die die Ecken eines Rechtecks steuern?-js-Tutorial-php.cn

Wie legt man mit FabricJS Stile fest, die die Ecken eines Rechtecks steuern?

PHPz

Freigeben： 2023-08-24 09:37:14

nach vorne

1148 Leute haben es durchsucht

Wie legt man mit FabricJS Stile fest, die die Ecken eines Rechtecks steuern?

In diesem Tutorial lernen wir, wie man die Kontrollecken gestaltet Rechteck mit FabricJS. Rechteck ist eine der verschiedenen Formen, die von bereitgestellt werden FabricJS. Um ein Rechteck zu erstellen, müssen wir eine Instanz erstellen Fabric.Rect-Klasse und fügen Sie sie der Leinwand hinzu.

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 das Attribut cornerStyle verwenden, um den Stil zu ändern.

Syntax

new fabric.Rect({ cornerStyle: String }: Object)

Nach dem Login kopieren

Parameter

Optionen (optional) – Dieser Parameter ist ein Objekt, das unserem Rechteck zusätzliche Anpassungen ermöglicht. Mit diesem Parameter können Sie Eigenschaften wie Farbe, Cursor, Strichstärke und viele andere Eigenschaften ändern, die mit dem Objekt verknüpft sind, dessen cornerStyle ein Attribut ist.

Optionstaste

cornerStyle – Diese Eigenschaft akzeptiert einen string, mit dem wir den Stil angeben können, den wir für die Ecke steuern möchten.

Beispiel 1

Standardstil von Kontrollecken

Sehen wir uns ein Codebeispiel an, das den Standardstil von Kontrollecken zeigt.

<!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 style of controlling corners</h2>
   <p>Click on the rectangle to see the default style of its 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 rectangle object
      var rect = new fabric.Rect({
         left: 125,
         top: 90,
         width: 170,
         height: 70,
         fill: "#cf1020",
         borderColor: "black",
         borderScaleFactor: 3,
         cornerColor: "#3b7a57",
      });

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

Nach dem Login kopieren

Beispiel

Übergabe von cornerStyle als Schlüssel mit dem Wert „Kreis“

Wir können die aktiv ausgewählte Kontrollecke angeben Objekt, indem Sie den Wert als „Kreis“ oder „Rechteck“ übergeben. Wenn Sie den Wert als „Kreis“ übergeben, wird dies erledigt Die Kontrollecken sind abgerundet, wie wir es im folgenden Beispiel gemacht haben:

<!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 cornerStyle as key with the value "circle"</h2>
   <p>Click on the rectangle to see the circle style of its 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 rectangle object
      var rect = new fabric.Rect({
         left: 125,
         top: 90,
         width: 170,
         height: 70,
         fill: "#cf1020",
         borderColor: "black",
         borderScaleFactor: 3,
         cornerColor: "#3b7a57",
         cornerStyle: "circle",
      });

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

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonWie legt man mit FabricJS Stile fest, die die Ecken eines Rechtecks steuern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!