Web-Frontend
js-Tutorial
Wie kann die Strichstärke eines Rechtecks beim Skalieren mit FabricJS beibehalten werden?
Wie kann die Strichstärke eines Rechtecks beim Skalieren mit FabricJS beibehalten werden?
In diesem Tutorial erfahren Sie, wie Sie die Strichstärke eines Rechtecks beim Skalieren mit FabricJS beibehalten. Standardmäßig erhöht oder verringert sich die Strichstärke basierend auf dem Skalierungswert des Objekts. Wir können dieses Verhalten jedoch deaktivieren, indem wir die Eigenschaft StrokeUniform verwenden.
Syntax
new fabric.Rect({ StrokeUniform: Boolean }: Object)Parameter< ;/ h2>Optionen (optional)− Dieser Parameter ist ein Objekt, das zusätzliche Anpassungen für die Rechteckdefinition bereitstellt. Mit diesem Parameter können Sie die Farbe, den Cursor, die Strichstärke und viele andere Eigenschaften im Zusammenhang mit der Eigenschaft StrokeUniform ändern.
Wahltaste
strokeUniform< strong>− Diese Eigenschaft akzeptiert einen Booleschen Wert, mit dem wir angeben können, ob die Strichbreite mit dem Objekt skaliert. Der Standardwert ist false.
Beispiel 1
Optionen (optional)− Dieser Parameter ist ein Objekt, das zusätzliche Anpassungen für die Rechteckdefinition bereitstellt. Mit diesem Parameter können Sie die Farbe, den Cursor, die Strichstärke und viele andere Eigenschaften im Zusammenhang mit der Eigenschaft StrokeUniform ändern.
strokeUniform< strong>− Diese Eigenschaft akzeptiert einen Booleschen Wert, mit dem wir angeben können, ob die Strichbreite mit dem Objekt skaliert. Der Standardwert ist false.
Standarddarstellung der Strichstärke beim Skalieren von Objekten
Sehen wir uns ein Codebeispiel an, das die Standarddarstellung der Strichstärke eines rechteckigen Objekts beschreibt, das skaliert wird. Da wir die Eigenschaft StrokeUniform nicht verwenden, wird die Strichstärke auch von der Skalierung des Objekts beeinflusst.
<!DOCTYPE html>
Die chinesische Übersetzung von <html>
<Kopf>
<!-- Fabric JS-Bibliothek hinzufügen -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script>
Die chinesische Übersetzung von </head>
Die chinesische Übersetzung von <body>
<h2 id="Standarddarstellung-der-Strichstärke-beim-Skalieren-von-Objekten">Standarddarstellung der Strichstärke beim Skalieren von Objekten</h2>
<p>Versuchen Sie, das Objekt zu skalieren, um das Standardverhalten anzuzeigen</p>
<canvas id="canvas"></canvas>
Die chinesische Übersetzung von <script> ist: <script>
// Eine Canvas-Instanz initialisieren
var canvas = new fabric.Canvas("canvas");
Canvas.setWidth(document.body.scrollWidth);
Canvas.setHeight(250);
// Ein rechteckiges Objekt initialisieren
var rect = new fabric.Rect({
links: 55,
oben: 90,
Breite: 170,
Höhe: 70,
Die chinesische Übersetzung von fill: „#ccccff“ lautet: fill: „#ccccff“,
Polsterung: 9,
Strich: „#483d8b“，
Strichbreite: 5,
});
//Füge es der Leinwand hinzu
Canvas.add(rect);
</script>
Die chinesische Übersetzung von </body> ist: </body>
</html>Beispiel
Übergabe der Eigenschaft „StrokeUniform“ als Schlüssel
In diesem Beispiel übergeben wir die Eigenschaft „StrokeUniform“ als Schlüssel und „True“ als Wert Daher werden die Striche des Objekts nicht mehr größer oder kleiner Durch die Skalierung des Objekts wird sichergestellt, dass der Strich immer genau der Pixelgröße entspricht Der Eingabeinhalt wird für die Strichstärke eingegeben.
<!DOCTYPE html>
Die chinesische Übersetzung von <html>
<Kopf>
<!-- Fabric JS-Bibliothek hinzufügen -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script>
Die chinesische Übersetzung von </head>
Die chinesische Übersetzung von <body>
<h2 id="StrokeUniform-Eigenschaft-als-Schlüssel-übergeben">StrokeUniform-Eigenschaft als Schlüssel übergeben</h2>
<p>Versuchen Sie, das Objekt zu skalieren, um sicherzustellen, dass der Strich eine einheitliche Breite behält.</p>
<canvas id="canvas"></canvas>
Die chinesische Übersetzung von <script> ist: <script>
// Eine Canvas-Instanz initialisieren
var canvas = new fabric.Canvas("canvas");
Canvas.setWidth(document.body.scrollWidth);
Canvas.setHeight(250);
// Ein rechteckiges Objekt initialisieren
var rect = new fabric.Rect({
links: 55,
oben: 90,
Breite: 170,
Höhe: 70,
Die chinesische Übersetzung von fill: „#ccccff“ lautet: fill: „#ccccff“,
Polsterung: 9,
Strich: „#483d8b“，
Strichbreite: 5,
StrokeUniform: wahr,
});
//Füge es der Leinwand hinzu
Canvas.add(rect);
</script>
Die chinesische Übersetzung von </body> ist: </body>
</html>