How to flip a circle vertically using FabricJS?-JS Tutorial-php.cn

How to flip a circle vertically using FabricJS?

WBOY

Release： 2023-08-24 12:29:02

forward

971 people have browsed it

如何使用 FabricJS 垂直翻转圆？

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)

Copy after login

Parameters

Options (optional) - This parameter is a Object< /em> 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.

Option Key

flipY - This property accepts a Boolean value. It allows us to flip objects vertically.

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&#39;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>

Copy after login

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>

Copy after login

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!