本文介紹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和高级画板的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。