Home > Article > Web Front-end > How to flip a circle vertically using FabricJS?
How to flip a circle vertically using FabricJS?
- WBOYforward
- 2023-08-24 12:29:02955browse
In this tutorial, we will learn how to flip a Circle object vertically using FabricJS. Circles are one of the various shapes provided by FabricJS. In order to create a circle, we must create an instance of the Fabric.Circle class and add it to the canvas. We can flip the circular object vertically using the flipY property.
Syntax
new fabric.Circle({ flipY: Boolean }: Object)Parameters
Options (optional) - This parameter is a Object Provides additional customization for our circles. Using this parameter, you can change properties such as color, cursor, stroke width, and many other properties associated with the object for which flipY is the property.
ul>flipY - This property accepts a Boolean value. It allows us to flip objects vertically.
Option Key
Example 1
Passing flipY as a key with 'false' value
Let's look at an example that shows us the default orientation of circular objects in FabricJS. Since we passed a false value to the flipY property, the circular object will not flip vertically.
<!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>Example 2
Passing the FlipY property as a key with a value of "true"
In this example we have a radius of 80px The circular object has a vertical linear gradient fill. When we apply the flipY property to the circle object, it flips vertically, so we see the gradient flipped as well.
<!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>The above is the detailed content of How to flip a circle vertically using FabricJS?. For more information, please follow other related articles on the PHP Chinese website!