Heim > Artikel > Web-Frontend > 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.
new fabric.Rect({ cornerSize: Number }: Object)
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.
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.
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>
Ü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!