In diesem Tutorial erfahren Sie, wie Sie mit FabricJS ein Rechteckobjekt horizontal spiegeln. Rechteck ist eine der verschiedenen Formen, die FabricJS bereitstellt. Um ein Rechteck zu erstellen, müssen wir eine Instanz der Fabric.Rect-Klasse erstellen und sie der Leinwand hinzufügen. Mit der Eigenschaft flipX können wir das rechteckige Objekt horizontal spiegeln.
new fabric.Rect({ flipX: Boolean }: 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 FlipX als Attribut ändern.
flipX – Diese Eigenschaft akzeptiert einen Boolean-Wert, der es uns ermöglicht, das Objekt horizontal zu spiegeln. < /p>
Übergabe von flipX als Schlüssel mit dem Wert „false“
Schauen wir uns ein Codebeispiel an, das uns die Standardausrichtung eines Rechteckobjekts in FabricJS zeigt. Da wir der Eigenschaft flipX einen False-Wert übergeben haben, wird das rechteckige Objekt 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 object is 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 rectangle object
var rect = new fabric.Rect({
left: 125,
top: 90,
width: 170,
height: 70,
borderColor: "purple",
borderScaleFactor: 3,
flipX: false,
});
// Create gradient fill
rect.set(
"fill",
new fabric.Gradient({
type: "linear",
coords: { x1: 0, y1: 0, x2: 50, y2: 0 },
colorStops: [
{ offset: 0, color: "pink" },
{ offset: 1, color: "blue" },
],
})
);
// Add it to the canvas
canvas.add(rect);
</script>
</body>
</html>Übergabe des Attributs flipX als Schlüssel mit dem Wert „true“
In diesem Beispiel haben wir ein rechteckiges Objekt mit einer Breite von 170 und einer Höhe von 70 mit einer horizontalen Linie Farbverlaufsfüllung. Wenn wir die FlipX-Eigenschaft auf das rechteckige Objekt anwenden, wird es horizontal gespiegelt, sodass auch der Farbverlauf gespiegelt 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>Passing the flipX property as key with a True value</h2>
<p>You can see now that the object 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 rectangle object
var rect = new fabric.Rect({
left: 125,
top: 90,
width: 170,
height: 70,
borderColor: "purple",
borderScaleFactor: 3,
flipX: true,
});
// Create gradient fill
rect.set(
"fill",
new fabric.Gradient({
type: "linear",
coords: { x1: 0, y1: 0, x2: 50, y2: 0 },
colorStops: [
{ offset: 0, color: "pink" },
{ offset: 1, color: "blue" },
],
})
);
// Add it to the canvas
canvas.add(rect);
</script>
</body>
</html>Das obige ist der detaillierte Inhalt vonWie drehe ich ein Rechteck mit FabricJS horizontal um?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
