Wie stelle ich mit FabricJS die Größe der Kontrollecken eines Rechtecks ein?-js-Tutorial-php.cn

Wie stelle ich mit FabricJS die Größe der Kontrollecken eines Rechtecks ein?

WBOY

Freigeben： 2023-09-21 11:17:02

nach vorne

1129 Leute haben es durchsucht

Wie stelle ich mit FabricJS die Größe der Kontrollecken eines Rechtecks ein?

In diesem Tutorial lernen wir, wie man die Größe der Kontrollecken einstellt Rechteck mit FabricJS. Der Kontrollwinkel eines Objekts ermöglicht es uns, es zu skalieren und zu strecken oder den Standort ändern.

Wir können die Kontrollecken auf viele Arten anpassen, z. B. durch Hinzufügen spezifischer Elemente Färben Sie es, ändern Sie seine Größe und mehr. Wir können CornerSize verwenden, um die Größe zu ändern Eigentum.

Syntax

new fabric.Rect({ cornerSize: Number }: 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 die Farbe, den Cursor, die Strichstärke und andere Eigenschaften im Zusammenhang mit dem Objekt mit „cornerSize“ als Attribut ändern.

Wahltaste

cornerSize – Diese Eigenschaft akzeptiert eine Zahl, mit der wir die Größe der Ecken des ausgewählten Objekts manipulieren können. Der Standardwert ist 13.

Beispiel 1

Kontrollieren Sie die Standardgröße der Ecken.

Sehen wir uns ein Codebeispiel an, das die Standardgröße der Kontrollecken beschreibt Wenn ein rechteckiges Objekt 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>Select the rectangle to see the default size of the 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 2

Übergabe von cornerSize als Schlüssel mit benutzerdefiniertem Wert

In diesem Beispiel übergeben wir die CornerSize-Eigenschaft als Schlüssel mit dem Wert 17. uns Sie können sehen, wie sich die Größe unserer Kontrollecken beim rechteckigen Objekt ändert Ausgewählt.

<!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>Select the rectangle to see the size of the 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",
         cornerSize: 17,
      });

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

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonWie stelle ich mit FabricJS die Größe der Kontrollecken eines Rechtecks ein?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!