本文介紹fabric.js框架使用，以及使用fabricjs打造一個(gè)高級(jí)畫板程序.

高級(jí)畫板功能介紹

• 全局繪制顏色選擇
• 護(hù)眼模式、網(wǎng)格模式切換
• 自由繪制
• 畫箭頭
• 畫直線
• 畫虛線
• 畫圓/橢圓/矩形/直角三角形/普通三角形/等邊三角形
• 文字輸入
• 圖片展示及相關(guān)移動(dòng)、縮放等操作
• 刪除功能

（文末附：畫板GitHub地址&fabric.js使用秘籍）

功能截圖如下：

動(dòng)態(tài)效果圖：

?

fabric.js介紹

fabric.js是什么
fabric.js是可以簡(jiǎn)化canvas編寫的js庫(kù)，提供canvas缺少的對(duì)象模型，包含動(dòng)畫、數(shù)據(jù)序列號(hào)和反序列化的等高級(jí)功能的js庫(kù)，開源項(xiàng)目，在GitHub有很多人貢獻(xiàn)。

fabric.js優(yōu)缺點(diǎn)
優(yōu)點(diǎn)：fabric提供超好的畫布能力.
缺點(diǎn)：api超級(jí)爛，沒有相應(yīng)的demo代碼，上手難度較大.

?

fabric.js使用筆記

對(duì)象

fabric.Circle 圓
fabric.Ellipse 橢圓
fabric.Line 直線
fabric.Polygon
fabric.Polyline
fabric.Rect 矩形
fabric.Triangle 三角形

?

方法

add(object) 添加
insertAt(object,index) 添加
remove(object) 移除
forEachObject 循環(huán)遍歷
getObjects() 獲取所有對(duì)象
item(int) 獲取子項(xiàng)
isEmpty() 判斷是否空畫板
size() 畫板元素個(gè)數(shù)
contains(object) 查詢是否包含某個(gè)元素
fabric.util.cos
fabric.util.sin
fabric.util.drawDashedLine 繪制虛線
getWidth() setWidth()
getHeight()
clear() 清空
renderAll() 重繪
requestRenderAll() 請(qǐng)求重新渲染
rendercanvas() 重繪畫板
getCenter().top/left 獲取中心坐標(biāo)
toDatalessJSON() 畫板信息序列化成最小的json
toJSON() 畫板信息序列化成json
moveTo(object,index) 移動(dòng)
dispose() 釋放
setCursor() 設(shè)置手勢(shì)圖標(biāo)
getSelectionContext()獲取選中的context
getSelectionElement()獲取選中的元素
getActiveObject() 獲取選中的對(duì)象
getActiveObjects() 獲取選中的多個(gè)對(duì)象
discardActiveObject()取消當(dāng)前選中對(duì)象
isType() 圖片的類型
setColor(color) = canvas.set("full","");
rotate() 設(shè)置旋轉(zhuǎn)角度
setCoords() 設(shè)置坐標(biāo)

?

事件

object:added
object:removed
object:modified
object:rotating
object:scaling
object:moving
object:selected 這個(gè)方法v2已經(jīng)廢棄，使用selection:created替代，多選不會(huì)觸發(fā)
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; 控件不能被選擇，不會(huì)被操作
canvas.selection = true; 畫板顯示選中
canvas.skipTargetFind = true; 整個(gè)畫板元素不能被選中
canvas.freeDrawingBrush.color = "#E34F51" 設(shè)置自由繪畫筆的顏色
freeDrawingBrush.width 自由繪筆觸寬度

?

IText的方法

selectAll() 選擇全部
getSelectedText() 獲取選中的文本
exitEditing() 退出編輯模式

?

繪制直線

var line = new fabric.Line([10, 10, 100, 100], {fill: 'green',stroke: 'green', //筆觸顏色strokeWidth: 2,//筆觸寬度 }); canvas.add(line);

?

繪制虛線

在繪制直線的基礎(chǔ)上添加屬性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個(gè)像素空b個(gè)像素。

?

圖片去掉選中邊框和旋轉(zhuǎn)，且只能移動(dòng)，不可操作

oImg.hasControls = false; 只能移動(dòng)不能（編輯）操作
oImg.hasBorders = false; 去掉邊框，可以正常操作
hasRotatingPoint = false; 不能被旋轉(zhuǎn)
hasRotatingPoint 控制旋轉(zhuǎn)點(diǎn)不可見

fabric.Image.fromURL("300.jpg", function (oImg) {canvas.add(oImg);oImg.hasControls = oImg.hasBorders = false; });

?

福利環(huán)節(jié)

簡(jiǎn)易畫板程序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

?

總結(jié)

以上是生活随笔為你收集整理的fabric.js和高级画板的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。