本文簡介
點贊 + 關注 + 收藏 = 學會了
本文介紹 Fabric.js 的圓形筆刷功能。
圓形筆刷是作用在 “自由繪制” 的畫筆之上的。從名字就可以看出，這個筆刷會用一個個圓形來填充繪制的路徑。
看圖會更直觀
file
Fabric.js 會使用不同頻率、大小、顏色深淺來繪制出上圖效果。
本文使用
Fabric.js 5.2.1
常用配置
要做出上圖的效果，首先需要將畫布設置成 繪畫模式 。
初始化畫布
首先需要初始化畫布，之后的每個屬性和方法講解，都會基于這段代碼。
<canvas id="c" width="600" height="400" style="border: 1px solid #ccc;"></canvas>
<!-- 引入 Fabric.js -->
<script src="https://cdn.bootcdn.net/ajax/libs/fabric.js/521/fabric.js"></script>
<script>
// 寫法1
const canvas = new fabric.Canvas('c', {
isDrawingMode: true // 開啟繪畫模式
})
// 寫法2
// const canvas = new fabric.Canvas('c')
// canvas.isDrawingMode = true
</script>
要將畫布設置成 繪畫模式 ，需要將 isDrawingMode 設置為 true 。
上面兩種寫法選一種即可。
開啟圓形筆刷
將筆刷設置成圓形同樣有2種寫法。
寫法1
// 省略初始化代碼
canvas.freeDrawingBrush = new fabric.CircleBrush(canvas)
寫法2
// 省略初始化代碼
let circleBrush = new fabric.CircleBrush()
circleBrush.initialize(canvas)
canvas.freeDrawingBrush = circleBrush
file
上面兩種寫法用那種都行，但都會相應影響后續的代碼量。
如果你后續要經常修改畫筆的屬性，我建議用 寫法2 。
設置筆刷寬度
如果上面那步你使用了 寫法1 ，要設置筆刷寬度需要這樣寫
// 省略初始化代碼
canvas.freeDrawingBrush = new fabric.CircleBrush(canvas) // 創建圓形筆刷
canvas.freeDrawingBrush.width = 6 // 筆刷寬度，默認10
file
如果你使用了 寫法2 ，設置的代碼如下所示
// 省略初始化代碼
// 創建圓形筆刷
let circleBrush = new fabric.CircleBrush()
circleBrush.initialize(canvas)
canvas.freeDrawingBrush = circleBrush
circleBrush.width = 30
file
設置筆刷顏色
file
// 省略初始化代碼
circleBrush.color = 'pink'
我將筆刷設置成粉紅色了，除了關鍵字顏色，還支持 rgb 等設置方法
circleBrush.color = '#c123a8'
circleBrush.color = 'rgb(10, 230, 120)'
設置陰影
file
// 省略初始化代碼
circleBrush.shadow = new fabric.Shadow({
blur: 10, // 羽化程度
offsetX: 20, // x軸偏移量
offsetY: 20, // y軸偏移量
color: '#30e3ca' // 投影顏色
})
和 基礎筆刷 設置陰影的方法是一樣的。
常用方法
常用的方法也有幾個，但有部分是需要注意的，要組合使用才有效果。
鼠標按下
// 省略初始化代碼
circleBrush.onMouseDown = function (pointer, e) {
console.log(pointer)
console.log(e)
}
使用 onMouseDown 可以設置鼠標按下時要觸發的事件。該事件有2個參數。
鼠標松開
// 省略初始化代碼
circleBrush.onMouseUp = function (pointer) {
console.log(pointer)
}
和 “鼠標按下” 一樣簡單。使用 onMouseUp 可以設置鼠標松開的事件。
鼠標移動時
// 省略初始化代碼
circleBrush.onMouseMove = function (pointer, e) {
console.log(pointer)
console.log(e)
circleBrush.drawDot(pointer)
}
使用 onMouseMove 可以設置鼠標移動時的事件。但在該事件中還需要執行 drawDot 事件，并傳入當前鼠標位置才能進行正確繪制。
在鼠標移動事件中還能添加更多方法，比如在繪制的基礎上，在附近再畫多一條線
// 省略初始化代碼
circleBrush.onMouseMove = function (pointer, e) {
console.log(pointer)
console.log(e)
circleBrush.drawDot(pointer)
circleBrush.addPoint({x: pointer.x + 50, y: pointer.y + 50}) // 在附近話多一條線
}
file
以上就是 Fabric 圓形筆刷的常用玩法~
代碼倉庫
? 原生版本的代碼
推薦閱讀
- ??《Fabric.js 筆刷到底怎么用？》
- ??《Fabric.js 自由繪制橢圓》
- ??《Fabric.js 橡皮擦的用法（包含恢復功能）》
- ??《Fabric.js 自定義右鍵菜單》
- ??《Fabric.js 從入門到膨脹》
點贊 + 關注 + 收藏 = 學會了
