In diesem Tutorial erfahren wir, wie man mit FabricJS ein Textbox-Objekt horizontal spiegeln kann. Wir können den in das Textfeld geschriebenen Text anpassen, strecken oder verschieben. Um ein Textfeld zu erstellen, müssen wir eine Instanz der Fabric.Textbox-Klasse erstellen und sie der Leinwand hinzufügen. Mit der FlipX-Eigenschaft können wir das Textfeldobjekt horizontal spiegeln.
new fabric.Textbox(text: String, { flipX: Boolean }: Object)text – Dieser Parameter akzeptiert einen string, das ist die Textzeichenfolge, die wir in unserem Textfeld anzeigen möchten.
Optionen (optional) – Dieser Parameter ist ein Objekt , das eine zusätzliche Anpassung unseres Textfelds ermöglicht. Mit diesem Parameter können Sie objektbezogene Eigenschaften wie Farbe, Cursor, Strichstärke und viele andere Eigenschaften ändern. flipX ist eine Eigenschaft dieses Objekts.
flipX – Diese Eigenschaft akzeptiert einen booleschen-Wert, der es uns ermöglicht, das Objekt horizontal zu spiegeln.
FlipX als Schlüssel mit dem Wert „false“ übergeben
Schauen wir uns ein Codebeispiel an, das uns die Standardausrichtung eines Textfeldobjekts in FabricJS zeigt. Da wir der Eigenschaft flipX einen False-Wert übergeben haben, wird der Text nicht horizontal gespiegelt.
<!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 flipX as key with a "false" value</h2>
<p>You can see that the text has not flipped horizontally</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 textbox object
var textbox = new fabric.Textbox("Each day provides its own gifts.", {
backgroundColor: "#e3dac9",
width: 400,
left: 70,
top: 70,
flipX: false,
});
// Create gradient fill
textbox.set(
"fill",
new fabric.Gradient({
type: "linear",
coords: { x1: 0, y1: 0, x2: 100, y2: 0 },
colorStops: [
{ offset: 0, color: "#545a2c" },
{ offset: 1, color: "#6495ed" },
],
})
);
// Add it to the canvas
canvas.add(textbox);
</script>
</body>
</html>Übergabe der FlipX-Eigenschaft als Schlüssel mit dem Wert „true“
In diesem Beispiel haben wir ein Textfeldobjekt mit einer Breite von 200 Pixeln und einer horizontalen linearen Farbverlaufsfüllung. Wenn wir die Eigenschaft „flipX“ auf das Textfeldobjekt anwenden, wird der Text horizontal gespiegelt, sodass wir auch den Farbverlauf und die Textspiegelung sehen.
<!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 the flipX property as key with a ‘true’ value</h2>
<p>You can see that the text has flipped horizontally</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 textbox object
var textbox = new fabric.Textbox("Each day provides its own gifts.", {
backgroundColor: "#e3dac9",
width: 400,
left: 70,
top: 70,
flipX: true,
});
// Create gradient fill
textbox.set(
"fill",
new fabric.Gradient({
type: "linear",
coords: { x1: 0, y1: 0, x2: 100, y2: 0 },
colorStops: [
{ offset: 0, color: "#545a2c" },
{ offset: 1, color: "#6495ed" },
],
})
);
// Add it to the canvas
canvas.add(textbox);
</script>
</body>
</html>Das obige ist der detaillierte Inhalt vonWie kann ich ein Textfeld mit FabricJS horizontal spiegeln?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
