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 padding of a Triangle using FabricJS?
<p>In this tutorial, we are going to learn how to set the padding of a Triangle using FabricJS. Triangle is one of the various shapes provided by FabricJS. In order to create a triangle, we will have to create an instance of <em>fabric.Triangle</em> class and add it to the canvas.</p><p>Just as we can specify the position, colour, opacity and dimension of a triangle object in the canvas, we can also set the padding of a triangle object. This can be done by using the <em>padding</em> property.</p><h2>Syntax</h2><pre class="just-code notranslate language-javascript" data-lang="javascript">new fabric.Triangle({ padding : Number }: Object)</pre><h2>Parameters</h2><ul class="list"><li><p><strong>Options</strong><strong> (optional)</strong> − This parameter is an <em>Object</em> which provides additional customizations to our triangle. Using this parameter, properties such as colour, cursor, stroke width, and a lot of other properties can be changed related to the object of which <em>padding</em> is a property.</p></li></ul><h2>Options Keys</h2><ul class="list"><li><p><strong>padding</strong> − This property accepts a <strong>Number</strong> value which allows us to set the distance between the triangle object and its controlling borders.</p></li></ul><h2>Example 1</h2><p><strong>Default appearance when <em>padding</em> is not used</strong></p><p>Let's see a code example that displays the appearance of our triangle object when the <em>padding</em> property is not used. As we can see, there is no space between the object and its surrounding controlling borders. This means that there is zero padding between the triangle and its controlling borders.</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>Default appearance when padding is not used</h2> <p>You can select the triangle to see there is no space between the object and its controlling borders</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 triangle object var triangle = new fabric.Triangle({ left: 105, top: 70, width: 90, height: 80, fill: "#746cc0", stroke: "#967bb6", strokeWidth: 5, }); // Add it to the canvas canvas.add(triangle); </script> </body> </html></pre><h2>Example 2</h2><p><strong>Passing <em>padding</em> property as key</strong></p><p>In this example, we are passing the padding property as key with a value 7. This indicates that there will be a 7px distance between the triangle object and all of its controlling borders.</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 padding property as key</h2> <p>Select the triangle to see the padding between the object and its controlling borders.</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 triangle object var triangle = new fabric.Triangle({ left: 105, top: 70, width: 90, height: 80, fill: "#746cc0", stroke: "#967bb6", strokeWidth: 5, padding: 7, }); // Add it to the canvas canvas.add(triangle); </script> </body> </html></pre>
93 Views
