Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to work with units like inch & mm in fabric js

I am working on a fabric js application & i need work with measurement units like inches & mm
I tried this code & it display blank
So my question is how work with units like inch & mm in fabric js

a = new fabric.Rect({ 
            top:0,
            left:0 ,
            fill: '#000',
            width: 50mm,
            height: 50mm,
           
        });
b = new fabric.Rect({   
            top:0,
            left:200,   
            fill: '#000',
            width: 1in,
            height: 1in,
           
        });
    canvas.add(a, b);
<canvas id='canvas' width="500" height="400" style="border:#000 1px solid;"></canvas>
like image 353
Dinesh Avatar asked Nov 02 '15 10:11

Dinesh


People also ask

How do you write unit inches?

The international standard symbol for inch is in (see ISO 31-1, Annex A) but traditionally the inch is denoted by a double prime, which is often approximated by a double quote symbol, and the foot by a prime, which is often approximated by an apostrophe. For example; three feet, two inches can be written as 3′ 2″.

What system of measurement is used for inches as units?

The U.S. is one of the few countries globally which still uses the Imperial system of measurement, where things are measured in feet, inches, pounds, ounces, etc.


1 Answers

fabricjs works in pixels. There is a function: fabric.util.parseUnit() that can parse inches, mm, pixels, points.

    a = new fabric.Rect({ 
                top:0,
                left:0 ,
                fill: '#000',
                width: fabric.util.parseUnit('50mm'),
                height: fabric.util.parseUnit('50mm'),

            });
    b = new fabric.Rect({   
                top:0,
                left:200,   
                fill: '#000',
                width: fabric.util.parseUnit('1in'),
                height:  fabric.util.parseUnit('1in'),
            });
canvas.add(a, b);
like image 118
AndreaBogazzi Avatar answered Oct 16 '22 15:10

AndreaBogazzi