上一篇我們繪製過一個方塊，當作範例，讓我們來繪製更多圖案吧~!!
Fabricjs 在繪製之前，記得要對畫布做宣告，在上一篇也有寫過~沒忘記吧!!
var canvas =new fabric.Canvas(‘main’); // 要使用id=”main” 的 canvas 標籤
我們先準備HTML，引用JS就到fabricjs官方下載囉!
<body>
<canvas id="main"></canvas>
<script>
var canvas =new fabric.Canvas('main'); // 要使用id="main" 的 canvas 標籤
......
</script>
</body>
Fabricjs提供以下可以物件可以建立
- 直線(Line)
- 圓形(Circle)
- 三角形(Triangle)
- 方型(Rect)
- 橢圓(Ellipse)
- 折線圖(Polyline)
- 多邊形(Polygon)
- 不規則圖形(Path)
- 文字(Text)
- 可編譯文字(IText)
- 圖片(fabric.Image)
以下介紹基本繪製方式。
1.直線
Fabricjs 提供兩個座標(x1,y1)(x2,y2) => [x1,y1,x2,y2] 會連成一直線，想像中需以(0,0)座標為出發點，不需管最後要放在畫面的哪裡，放哪裡由 left 和 top 控制囉。
var myLine = new fabric.Line([50, 50, 200, 100], {
stroke: 'blue',
strokeWidth: 2, // 必有欄位
top: 60,
left: 30
})
canvas.add(myLine )
2.圓形：
提供半徑(radius)就可以繪製出一個圓了
var circle = new fabric.Circle({
left: 100, //左邊距離px
top: 100, //上方距離 px
radius: 20, //半徑px
fill: 'green' //填色
});
canvas.add(circle); //新增至畫布
3.三角形：
如果要正三角，寬高給一樣就會是正三角形，不然都會是等腰三角形，如果忘記什麼是等腰三角形，國小數學老師會哭的。
var triangle = new fabric.Triangle({
left: 100, //左邊距離px
top: 100, //上方距離 px
width: 20, //寬
height: 30, //高
fill: 'blue' //填色
});
canvas.add(triangle ); //新增至畫布
4.方形：
方形就是提供很明顯的就是提供寬跟高 ，結束。
var rect = new fabric.Rect({
left:100,//左距離 px
top:100,//上距離px
fill:'red',//填色
width:30,//寬
height:30//高
});
canvas.add(rect); //新增至畫布
5.橢圓形
橢圓形與圓形差別在於不是提供半徑，而是提供上下彎(ry)的高度與左右彎(rx)的寬度。
canvas.add(new fabric.Ellipse({
left:100,//左距離 px
top:100,//上距離px
fill:'red',//填色
rx: 20, //左右寬度
ry: 40//上下高度
}));
6. Polyline(折線) & Polygon(多邊)
多邊形與折線圖，這兩個目前使用起來，繪製出來的效果我只能說是一模一樣，目前尚未知道差異在哪裡，如果有人知道，歡迎在底下留言跟我說下，感謝囉。
多邊形與折線圖都是提供多個座標，fabric會把所有座標依序連結起來，再把頭尾也連結起來形成一個圖形。
//座標位置
var points = [
{x:10,y:10},
{x:15,y:15},
{x:30,y:15},
{x:40,y:10},
{x:30,y:0},
{x:-10,y:-10}
];
canvas.add(new fabric.Polyline(points, {
left:100,//左距離 px
top:100 //上距離px
}));
canvas.add(new fabric.Polygon(points, {
left:200,//左距離 px
top:100 //上距離px
}));
7.不規則圖形
不規則徒刑 path 是參照 SVG的繪製的語法，如果要學會怎麼畫，可以先去研究SVG，或者將圖片上傳到有提供SVG轉檔的網站囉。
//path 是參照 SVG的畫法
var path = new fabric.Path('M 0 0 L 200 100 L 170 200 z',
{
left: 100, //左邊距離px
top: 100, //上方距離 px
fill: 'blue' //填色
}
);
canvas.add(path);
7. 文字
文字很簡單，只要提供，文字與座標
canvas.add(new fabric.Text('hello world', { left: 100, top: 100 }));
8.可編輯的文字
同上(懶)，只是將Text => IText
canvas.add(new fabric.IText('hello world', { left: 100, top: 100 }));
9.圖片
圖片引用方式有兩種
- URL
- img標籤
//HTML <canvas id="main"></canvas> <img src="my_image.png" id="my-image">
// JS
var canvas = new fabric.Canvas('main');
var imgElement = document.getElementById('my-image');
var imgInstance = new fabric.Image(imgElement, {
left: 100,
top: 100,
angle: 30,
opacity: 0.85
});
canvas.add(imgInstance);
使用Url做建立
//相對路徑
fabric.Image.fromURL('my_image.png', function(oImg) {
canvas.add(oImg);
});
//絕對路徑
fabric.Image.fromURL('https://www.myweb.con.tw/my_image.png', function(oImg) {
canvas.add(oImg);
});
以上就是基本的Fabric繪圖物件的基本使用方式囉，我們下次見，掰。