suchen

Heim  >  Artikel  >  Web-Frontend  >  Wie stelle ich mit FabricJS die Größe der Kontrollecken eines Rechtecks ​​ein?

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

WBOY
WBOYnach vorne
2023-09-21 11:17:021184Durchsuche

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)

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>

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>

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!

Property 对象
Stellungnahme：
Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen
Vorheriger Artikel：JavaScript-Programm zum Ermitteln der Array-Summe mittels bitweisem ODER, nachdem ein gegebenes Array nach K kreisförmigen Verschiebungen in zwei Hälften geteilt wurdeNächster Artikel：JavaScript-Programm zum Ermitteln der Array-Summe mittels bitweisem ODER, nachdem ein gegebenes Array nach K kreisförmigen Verschiebungen in zwei Hälften geteilt wurde

In Verbindung stehende Artikel

Mehr sehen