Fabric.js Polygon hasRotatingPoint Property
Last Updated :
31 Aug, 2020
The canvas polygon means the polygon is movable and can be stretched according to requirement. Further, the polygon can be customized when it comes to initial stroke color, shape, fill color, or stroke width.
In order to set the rotating point of the canvas polygon, the JavaScript library called FabricJS is used. After importing the library, we will create a canvas block in the body tag that will contain the polygon. After this, we will initialize instances of Canvas and polygon provided by FabricJS and set the rotating point of the canvas polygon using hasRotatingPoint property and render the polygon on the Canvas as given in the below example.
Syntax:
fabric.Polygon([
{ x: pixel, y: pixel },
{ x: pixel, y: pixel },
{ x: pixel, y: pixel},
{ x: pixel, y: pixel},
{ x: pixel, y: pixel }],
{ hasRotatingPoint: boolean }
);
Parameters: This function accepts a single parameter as mentioned above and described below:
- hasRotatingPoint: It specifies whether to make rotating point visible or not.
Note: Dimension pixels is must to create a polygon.
Below examples illustrate the Fabric.JS Polygon hasRotatingPoint property in JavaScript:
Example 1: In this example the hasRotatingPoint is set to false so you can not rotate the canvas of polygon.
<!DOCTYPE html>
< html >
< head >
< script src =
</ script >
</ head >
< body >
< div style = "text-align: center;width: 600px;" >
< h1 style = "color: green;" >
GeeksforGeeks
</ h1 >
< b >
Fabric.js | Polygon hasRotatingPoint Property
</ b >
</ div >
< canvas id = "canvas"
width = "600"
height = "200"
style = "border:1px solid #000000;" >
</ canvas >
< script >
// Initiate a Canvas instance
var canvas = new fabric.Canvas("canvas");
// Initiate a polygon instance
var polygon = new fabric.Polygon([
{ x: 295, y: 10 },
{ x: 235, y: 198 },
{ x: 385, y: 78},
{ x: 205, y: 78},
{ x: 355, y: 198 }], {
hasRotatingPoint: false
});
// Render the polygon in canvas
canvas.add(polygon);
</ script >
</ body >
</ html >
|
Output:
Example 2: In this example, the hasRotatingPoint is set to true so you can rotate the canvas of polygon.
<!DOCTYPE html>
< html >
< head >
< script src =
</ script >
</ head >
< body >
< div style = "text-align: center;width: 600px;" >
< h1 style = "color: green;" >
GeeksforGeeks
</ h1 >
< b >
Fabric.js | Polygon hasRotatingPoint Property
</ b >
</ div >
< canvas id = "canvas"
width = "600"
height = "200"
style = "border:1px solid #000000;" >
</ canvas >
< script >
// Initiate a Canvas instance
var canvas = new fabric.Canvas("canvas");
// Initiate a polygon instance
var polygon = new fabric.Polygon([
{ x: 295, y: 10 },
{ x: 235, y: 198 },
{ x: 385, y: 78},
{ x: 205, y: 78},
{ x: 355, y: 198 }], {
hasRotatingPoint: true
});
// Render the polygon in canvas
canvas.add(polygon);
</ script >
</ body >
</ html >
|
Output:
Reference: http://fabricjs.com/docs/fabric.Polygon.html#hasRotatingPoint
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...