Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to set the angle of rotation of a Rectangle using FabricJS?
<p>In this tutorial, we are going to set the angle of rotation of a Rectangle using FabricJS. Rectangle is one of the various shapes provided by FabricJS. In order to create a rectangle, we will have to create an instance of <em>fabric.Rect</em> class and add it to the canvas.</p><p>The <em>angle</em> property in FabricJS defines the angle of 2D rotation of an object. We also have the <em>centeredRotation </em>property that allows us to use the center point of a rectangle as the origin of transformation.</p><h2>Syntax</h2><pre class="result notranslate">new fabric.Rect({ angle: Number, centeredRotation: Boolean }: Object)</pre><h2>Parameters</h2><ul class="list"><li><p><strong>Options (optional)</strong> − This parameter is an <em>Object</em> which provides additional customizations to our rectangle. Using this parameter, properties such as colour, cursor, stroke width, and a lot of other properties can be changed related to the rectangle of which angle and <em>centeredRotation</em> are properties.</p></li></ul><h2>Options keys</h2><ul class="list"><li><p><strong>angle</strong> − This property accepts a <strong>Number</strong> which specifies the angle of rotation of a rectangle in degrees.</p></li><li><p><strong>centeredRotation</strong> − This property accepts a <strong>Boolean</strong> value which determines whether the center of the rectangle is the origin of transformation or not.</p></li></ul><h2>Example 1</h2><p><strong>Passing angle as key with a custom value and disabling the centered rotation for the rectangle</strong></p><p>Let’s see a code example to set the angle of rotation of a Rectangle in FabricJS. A negative angle specifies counter-clockwise direction whereas a positive angle specifies a clockwise direction. Since we have assigned <em>centeredRotation</em> a False value, the rectangle will rotate while using its corner point as the center of rotation.</p><pre class="demo-code notranslate language-javascript" data-lang="javascript"><!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>Passing angle as key with a custom value and disabling the centered rotation for the rectangle</h2> <p>Rotate the rectangle to see that its centered rotation has been disabled.</p> <canvas id="canvas"></canvas> <script> // Initiate a canvas instance var canvas = new fabric.Canvas("canvas"); canvas.setWidth(document.body.scrollWidth); canvas.setHeight(250); // Initiate a rectangle object var rect = new fabric.Rect({ left: 125, top: 90, width: 170, height: 70, fill: "#cf1020", centeredRotation: false, angle: 15, }); // Add it to the canvas canvas.add(rect); </script> </body> </html></pre><h2>Example 2</h2><p><strong>Enabling centered rotation for the rectangle</strong></p><p>As we can see from this example, by setting the centeredRotation property as true, our rectangle now uses its center as the center of rotation. Prior to version 1.3.4, centeredScaling and centeredRotation were enclosed within one single property called centerTransform.</p><pre class="demo-code notranslate language-javascript" data-lang="javascript"><!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>Enabling centered rotation for the rectangle</h2> <p>Rotate the rectangle to see that centered rotation has been enabled.</p> <canvas id="canvas"></canvas> <script> // Initiate a canvas instance var canvas = new fabric.Canvas("canvas"); canvas.setWidth(document.body.scrollWidth); canvas.setHeight(250); // Initiate a rectangle object var rect = new fabric.Rect({ left: 125, top: 90, width: 170, height: 70, fill: "#cf1020", centeredRotation: true, angle: 15, }); // Add it to the canvas canvas.add(rect); </script> </body> </html></pre>
181 Views
