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