Heim > Artikel > Web-Frontend > Wie kann man mit FabricJS einen Kreis vertikal umdrehen?
Wie kann man mit FabricJS einen Kreis vertikal umdrehen?
- WBOYnach vorne
- 2023-08-24 12:29:02952Durchsuche
In diesem Tutorial erfahren Sie, wie Sie mit FabricJS ein Kreisobjekt vertikal spiegeln. Kreise sind eine der verschiedenen Formen, die FabricJS bereitstellt. Um einen Kreis zu erstellen, müssen wir eine Instanz der Fabric.Circle-Klasse erstellen und sie der Leinwand hinzufügen. Mit der Eigenschaft flipY können wir das kreisförmige Objekt vertikal spiegeln.
Syntax
new fabric.Circle({ flipY: Boolean }: Object)Parameter
Optionen (optional) – Dieser Parameter ist ein Objekt, das zusätzliche Anpassungen für unsere Kreise ermöglicht. Mit diesem Parameter können Sie Eigenschaften wie Farbe, Cursor, Strichstärke und viele andere Eigenschaften ändern, die mit dem Objekt verknüpft sind, dessen Eigenschaft flipY ist.
ul>flipY – Diese Eigenschaft akzeptiert einen booleschen Wert. Es ermöglicht uns, Objekte vertikal zu spiegeln.
Option Key
Beispiel 1
Übergabe von flipY als Schlüssel mit dem Wert „false“
Schauen wir uns ein Beispiel an, das uns die Standardausrichtung kreisförmiger Objekte in FabricJS zeigt. Da wir der Eigenschaft flipY einen falschen Wert übergeben haben, wird das kreisförmige Objekt nicht vertikal 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>How to flip a Circle vertically using FabricJS?</h2>
<p>This is the default orientation of the object. We have set <b>flipY</b> as False, but even if we don't use it, <b>flipY</b> will be by default set to False. </p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
var circle = new fabric.Circle({
left: 215,
top: 50,
fill: "green",
radius: 80,
stroke: "#228b22",
strokeWidth: 2,
flipY: false
});
// Create gradient fill
circle.set("fill", new fabric.Gradient({
type: "linear",
coords: {
x1: 0,
y1: 0,
x2: 0,
y2: 50
},
colorStops: [{
offset: 0,
color: "red"
}, {
offset: 1,
color: "green"
}, ],
}));
// Adding them to the canvas
canvas.add(circle);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>Beispiel 2
Übergabe der FlipY-Eigenschaft als Schlüssel mit dem Wert „true“
In diesem Beispiel haben wir ein kreisförmiges Objekt mit einem Radius von 80 Pixeln und einer vertikalen linearen Farbverlaufsfüllung. Wenn wir die Eigenschaft flipY auf das Kreisobjekt anwenden, wird es vertikal gespiegelt, sodass wir auch die Farbverlaufsumkehr 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>How to flip a Circle vertically using FabricJS?</h2>
<p>Here observe that the circle has flipped vertically (see the gradient), as we have set <b>flipY</b> to True.</p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
var circle = new fabric.Circle({
left: 215,
top: 50,
fill: "green",
radius: 80,
stroke: "#228b22",
strokeWidth: 2,
flipY: true
});
// Create gradient fill
circle.set("fill", new fabric.Gradient({
type: "linear",
coords: {
x1: 0,
y1: 0,
x2: 0,
y2: 50
},
colorStops: [{
offset: 0,
color: "red"
}, {
offset: 1,
color: "green"
}, ],
}));
// Adding them to the canvas
canvas.add(circle);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>Das obige ist der detaillierte Inhalt vonWie kann man mit FabricJS einen Kreis vertikal umdrehen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!