How to set the horizontal scale factor of a circle using FabricJS?-JS Tutorial-php.cn

Table of Contents

Syntax

Parameters

Option Key

Example 2

Home

Web Front-end

JS Tutorial

How to set the horizontal scale factor of a circle using FabricJS?

Aug 24, 2023 am 09:41 AM

如何使用 FabricJS 设置圆的水平比例因子？

In this tutorial, we will learn how to set the horizontal scale factor of a circle 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. Just as we can specify the position, color, opacity, and size of a circular object within the canvas, we can also set the horizontal scale of the circular object. This can be done using the scaleX property.

Syntax

1	`new` `fabric.Circle({ scaleX : Number }: 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 scaleX is an attribute.

Option Key

scaleX - This property accepts numbers value. The assigned value determines the horizontal object scale factor. Its default value is 1.

Example 1

Default appearance when scaleX is not used

Let’s take a look at Code that displays the appearance of a circular object when the scaleX property is not used. By default, circular objects have a horizontal scale factor of 1. scaleX determines the transformation that resizes the object along the X-axis.

<em>&lt;!DOCTYPE html&gt;
&lt;html&gt;
   &lt;head&gt;
      &lt;!-- Adding the Fabric JS Library--&gt;
      &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js&quot;&gt;&lt;/script&gt;
   &lt;/head&gt;
 
   &lt;body&gt;
      &lt;h2&gt;Setting the horizontal scale factor of circle using FabricJS&lt;/h2&gt;
      &lt;p&gt;This is the default horizontal scale factor. We have not used the &lt;b&gt;scaleX&lt;/b&gt; property, but by default, it is set to 1. &lt;/p&gt;
      &lt;canvas id=&quot;canvas&quot;&gt;&lt;/canvas&gt;
 
      &lt;script&gt;
         // Initiate a canvas instance
         var canvas = new fabric.Canvas(&quot;canvas&quot;);
         var circle = new fabric.Circle({
            left: 115,
            top: 50,
            padding: 7,
            radius: 50,
            fill: &quot;#85bb65&quot;
         });
         canvas.add(circle);
         canvas.setWidth(document.body.scrollWidth);
         canvas.setHeight(250);
      &lt;/script&gt;
   &lt;/body&gt;
&lt;/html&gt;</em>

Copy after login

Example 2

Passing the scaleX attribute as key

In this example, we pass scaleX Attribute as key, value is 2. This means that the scale factor of a circular object is doubled in the horizontal direction.

&lt;!DOCTYPE html&gt;
&lt;html&gt;
   &lt;head&gt;
      &lt;!-- Adding the Fabric JS Library--&gt;
      &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js&quot;&gt;&lt;/script&gt;
   &lt;/head&gt;
 
   &lt;body&gt;
      &lt;h2&gt;Setting the horizontal scale factor of circle using FabricJS&lt;/h2&gt;
      &lt;p&gt;Notice the horizontal scale factor of the object. Here we have set &lt;b&gt;scaleX&lt;/b&gt; at 2, so the object appears stretched in the horizontal direction. &lt;/p&gt;
      &lt;canvas id=&quot;canvas&quot;&gt;&lt;/canvas&gt;
    
      &lt;script&gt;
         // Initiate a canvas instance
         var canvas = new fabric.Canvas(&quot;canvas&quot;);
         var circle = new fabric.Circle({
            left: 115,
            top: 50,
            padding: 7,
            radius: 50,
            scaleX: 2,
            fill: &quot;#85bb65&quot;
         });
         canvas.add(circle);
         canvas.setWidth(document.body.scrollWidth);
         canvas.setHeight(250);
      &lt;/script&gt;
   &lt;/body&gt;
&lt;/html&gt;

Copy after login

The above is the detailed content of How to set the horizontal scale factor of a circle using FabricJS?. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn