fabric.js和高級畫板
本文介紹fabric.js框架使用，以及使用fabricjs打造一個高級畫板程序.
高級畫板功能介紹
- 全局繪制顏色選擇
- 護眼模式、網格模式切換
- 自由繪制
- 畫箭頭
- 畫直線
- 畫虛線
- 畫圓/橢圓/矩形/直角三角形/普通三角形/等邊三角形
- 文字輸入
- 圖片展示及相關移動、縮放等操作
- 刪除功能
（文末附：畫板GitHub地址&fabric.js使用秘籍）
功能截圖如下：
動態效果圖：
fabric.js介紹
fabric.js是什麽
fabric.js是可以簡化canvas編寫的js庫，提供canvas缺少的對象模型，包含動畫、數據序列號和反序列化的等高級功能的js庫，開源項目，在GitHub有很多人貢獻。
fabric.js優缺點
優點：fabric提供超好的畫布能力.
缺點：api超級爛，沒有相應的demo代碼，上手難度較大.
fabric.js使用筆記
對象
fabric.Circle 圓
fabric.Ellipse 橢圓
fabric.Line 直線
fabric.Polygon
fabric.Polyline
fabric.Rect 矩形
fabric.Triangle 三角形
方法
add(object) 添加
insertAt(object,index) 添加
remove(object) 移除
forEachObject 循環遍歷
getObjects() 獲取所有對象
item(int) 獲取子項
isEmpty() 判斷是否空畫板
size() 畫板元素個數
contains(object) 查詢是否包含某個元素
fabric.util.cos
fabric.util.sin
fabric.util.drawDashedLine 繪制虛線
getWidth() setWidth()
getHeight()
clear() 清空
renderAll() 重繪
requestRenderAll() 請求重新渲染
rendercanvas() 重繪畫板
getCenter().top/left 獲取中心坐標
toDatalessJSON() 畫板信息序列化成最小的json
toJSON() 畫板信息序列化成json
moveTo(object,index) 移動
dispose() 釋放
setCursor() 設置手勢圖標
getSelectionContext()獲取選中的context
getSelectionElement()獲取選中的元素
getActiveObject() 獲取選中的對象
getActiveObjects() 獲取選中的多個對象
discardActiveObject()取消當前選中對象
isType() 圖片的類型
setColor(color) = canvas.set("full","");
rotate() 設置旋轉角度
setCoords() 設置坐標
事件
object:added
object:removed
object:modified
object:rotating
object:scaling
object:moving
object:selected 這個方法v2已經廢棄，使用selection:created替代，多選不會觸發
before:selection:cleared
selection:cleared
selection:updated
selection:created
path:created
mouse:down
mouse:move
mouse:up
mouse:over
mouse:out
mouse:dblclick
常用屬性
canvas.isDrawingMode = true; 可以自由繪制
canvas.selectable = false; 控件不能被選擇，不會被操作
canvas.selection = true; 畫板顯示選中
canvas.skipTargetFind = true; 整個畫板元素不能被選中
canvas.freeDrawingBrush.color = "#E34F51" 設置自由繪畫筆的顏色
freeDrawingBrush.width 自由繪筆觸寬度
IText的方法
selectAll() 選擇全部
getSelectedText() 獲取選中的文本
exitEditing() 退出編輯模式
繪制直線
var line = new fabric.Line([10, 10, 100, 100], { fill: ‘green‘, stroke: ‘green‘, //筆觸顏色 strokeWidth: 2,//筆觸寬度 }); canvas.add(line);
繪制虛線
在繪制直線的基礎上添加屬性strokeDashArray:Array
example：
var line = new fabric.Line([10, 10, 100, 100], { fill: ‘green‘, stroke: ‘green‘, strokeDashArray:[3,1] }); canvas.add(line);
strokeDashArray[a,b] =》 每隔a個像素空b個像素。
圖片去掉選中邊框和旋轉，且只能移動，不可操作
oImg.hasControls = false; 只能移動不能（編輯）操作
oImg.hasBorders = false; 去掉邊框，可以正常操作
hasRotatingPoint = false; 不能被旋轉
hasRotatingPoint 控制旋轉點不可見
fabric.Image.fromURL("300.jpg", function (oImg) {
canvas.add(oImg);
oImg.hasControls = oImg.hasBorders = false;
});
福利環節
簡易畫板程序GitHub地址：https://github.com/vipstone/drawingboard
fabric.js使用秘籍：https://github.com/vipstone/drawingboard/blob/master/fabricjs%E4%BD%BF%E7%94%A8%E7%AC%94%E8%AE%B0.md
fabric.js和高級畫板