Home > Article > Web Front-end > How to maintain the stroke width of an ellipse when scaling using FabricJS?

How to maintain the stroke width of an ellipse when scaling using FabricJS?

王林forward: 2023-08-30 19:25:111115browse

如何在使用 FabricJS 缩放时保持椭圆的笔划宽度？

In this tutorial, we will learn how to maintain the stroke width of an ellipse when scaling using FabricJS. By default, the stroke width increases or decreases based on the object's scale value. However, we can disable this behavior by using the StrokeUniform property.

Syntax

new fabric.Ellipse({ strokeUniform: Boolean }: Object)

Parameters

Options(optional) - This parameter is a provided Additional custom objects to our ellipse. Using this parameter, you can change the color, cursor, stroke width, and many other properties associated with the object for which styleUniform is a property.

Options Keys

Stroke Unification - This property accepts a boolean value that allows us Specifies whether the stroke width scales with the object. Its default value is False.

Example 1

Default appearance of stroke width when scaling an object

The following example describes scaling The default appearance of the stroke width of ellipse objects. Since we are not using the tripUniform property, the stroke width will also be affected by the object's scaling.

<!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 maintain stroke width of Ellipse while scaling using FabricJS?</h2>
      <p>Select the object and stretch it horizontally or vertically. Here the stroke width will get affected while scaling the object up or down. This is the default behavior. Here we have not used the <b>strokeUniform</b> property. </p>
      <canvas id="canvas"></canvas>
     
      <script>
         // Initiate a canvas instance
         var canvas = new fabric.Canvas("canvas");

         // Initiate an ellipse instance
         var ellipse = new fabric.Ellipse({
            left: 215,
            top: 100,
            fill: "blue",
            rx: 90,
            ry: 50,
            stroke: "#c154c1",
            strokeWidth: 15,
         });
         canvas.add(ellipse);
         canvas.setWidth(document.body.scrollWidth);
         canvas.setHeight(250);
      </script>
   </body>
</html>

Example 2

Passing the StrokeUniform property as a key

In this example we will pass the StrokeUniform Properties as keys. Therefore, the object's strokes will no longer increase or decrease as the object scales. In this example, the StrokeUniform property has been assigned a value of "true", which will ensure that the stroke always matches the exact pixel size entered for the stroke width.

<!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>Maintaining the stroke width of an Ellipse while scaling using FabricJS</h2>
      <p>Select the object and stretch it in any direction. Here the stroke width of the ellipse will remain unaffected at the time of scaling up because we have applied the <b>strokeUniform</b> property. </p>
      <canvas id="canvas"></canvas>

      <script>
         // Initiate a canvas instance
         var canvas = new fabric.Canvas("canvas");

         // Initiate an ellipse instance
         var ellipse = new fabric.Ellipse({
            left: 215,
            top: 100,
            fill: "blue",
            rx: 90,
            ry: 50,
            stroke: "#c154c1",
            strokeWidth: 15,
            strokeUniform: true,
         });

         // Adding it to the canvas
         canvas.add(ellipse);
         canvas.setWidth(document.body.scrollWidth);
         canvas.setHeight(250);
      </script>
   </body>
</html>

The above is the detailed content of How to maintain the stroke width of an ellipse when scaling using FabricJS?. For more information, please follow other related articles on the PHP Chinese website!

Statement：

This article is reproduced at:tutorialspoint.com. If there is any infringement, please contact admin@php.cn delete

Previous article：How to use SolverJS?Next article：How to use SolverJS?

See more