本文简介
点赞 + 关注 + 珍藏 = 学会了
喷雾笔刷 SprayBrush 是 fabric.js 提供的一个很好玩的工具，而且 fabric.js 也封装好了很多十分不便的属性让咱们配置，用起来非常简单的。
先看看成果：
惯例配置
喷雾笔刷作为一款笔刷工具，要应用它首先要让画布开启“绘画模式”。
将 isDrawingMode 设为 true 就能够开启。
<canvas id="c" width="500" height="400" style="border: 1px solid #ccc;"></canvas><script> // 初始化 const canvas = new fabric.Canvas('c', { isDrawingMode: true })</script>如果不在画布初始化时开启绘画模式，也能够之后再开启
canvas.isDrawingMode = true如果想切换回一般模式，只需把 isDrawingMode 改回 false 即可。
注册喷雾笔刷
喷雾笔刷叫 SprayBrush。
注册喷雾笔刷时须要把初始化的画布传进去，而后再赋值给 canvas.freeDrawingBrush
// 省略局部代码canvas.freeDrawingBrush = new fabric.SprayBrush(canvas)// 更举荐的写法let sprayBrush = new fabric.SprayBrush(canvas)canvas.freeDrawingBrush = sprayBrush我更举荐把 sprayBrush 保留到一个变量里，这样比拟不便之后配置各种成果。
除了下面这种写法，也能够这样写：
// 省略局部代码let sprayBrush = new fabric.SprayBrush()sprayBrush.initialize(canvas)canvas.freeDrawingBrush = sprayBrushinitialize() 是 SprayBrush 初始化的一个办法，外面接管的参数是以后的画布 canvas 。
设置笔刷粗细
为了不便其余属性演示，所以先把笔刷的宽度设置大点。
// 省略局部代码sprayBrush.width = 200width 属性就是用来设置画笔粗细的，数值越大画笔就越粗。
设置喷雾密度
能够应用 density 属性设置喷雾密度，数值越大密度就越大。
density 的默认值是 20。
// 省略局部代码sprayBrush.width = 200sprayBrush.density = 100 // 设置喷雾密度将 density 设置得小点比照一下
sprayBrush.width = 200sprayBrush.density = 10很直观的看到差距了。
设置喷点大小
“喷点” 就是喷雾中的每一个点，设置喷点宽度的属性名叫 dotWidth 。
dotWidth 默认值是 1。数值越大，喷点就越大。
// 省略局部代码sprayBrush.width = 200 // 设置喷雾宽度sprayBrush.dotWidth = 10 // 设置喷点大小设置喷点方差
能够应用 dotWidthVariance 属性设置喷点的方差。
dotWidthVariance 能够在规定范畴内随机生成大小不一的喷点。
dotWidthVariance 的默认值是1。数值越大，喷点随机大小就越大。
// 省略局部代码sprayBrush.width = 200sprayBrush.dotWidthVariance = 10设置了 dotWidthVariance 后，dotWidth 的意义就不大了。
防重叠
喷雾笔刷默认是会删除重叠的点，官网文档说这是处于性能思考的起因。
如果不心愿删除重叠的点，能够将 optimizeOverlapping 设为 false 。
// 省略局部代码sprayBrush.optimizeOverlapping = false设置喷点的随机不透明度
能够通过 randomOpacity 属性设置喷点的不透明度是否随机。
// 省略局部代码sprayBrush.randomOpacity = true设置喷雾暗影
在喷雾笔刷的文档里没提到暗影，但既然根底笔刷能够设置暗影，喷雾笔刷同样也能够设置暗影的。
// 省略局部代码sprayBrush.width = 200sprayBrush.dotWidthVariance = 10// 设置暗影成果sprayBrush.shadow = new fabric.Shadow({ blur: 10, offsetX: 10, offsetY: 10, color: '#30e3ca'})设置喷雾色彩
喷雾笔刷能够通过 color 设置喷雾色彩的，但官网文档如同忘了写这个属性了。
// 省略局部代码sprayBrush.color = 'pink'事件
后面讲到 initialize() 办法能够初始化画笔，除此之外喷雾笔刷还有其余事件办法。
喷雾筹备生成前和生成后
喷雾也是一种门路，所以能够监听 canvas 的门路生成时的周期。
在喷雾筹备生成前，能够监听 before:path:created ；喷雾生成后，能够监听 path:created。
// 省略局部代码// 筹备生成前canvas.on('before:path:created', opt => { console.log(opt.path)})// 生成后canvas.on('path:created', opt => { console.log(opt.path)})鼠标按下时 onMouseDown
sprayBrush.onMouseDown = function(t) { this.sprayChunks.length = 0, this.canvas.clearContext(this.canvas.contextTop), this._setShadow(), this.addSprayChunk(t), this.render(this.sprayChunkPoints)}鼠标挪动时 onMouseMove
sprayBrush.onMouseMove = function(t) { !0 === this.limitedToCanvasSize && this._isOutSideCanvas(t) || (this.addSprayChunk(t), this.render(this.sprayChunkPoints))}松开鼠标时 onMouseUp
sprayBrush.onMouseUp = function() { var t = this.canvas.renderOnAddRemove; this.canvas.renderOnAddRemove = !1; for (var e = [], i = 0, r = this.sprayChunks.length; i < r; i++) for (var n = this.sprayChunks[i], s = 0, o = n.length; s < o; s++) { var a = new fabric.Rect({ width: n[s].width, height: n[s].width, left: n[s].x + 1, top: n[s].y + 1, originX: "center", originY: "center", fill: this.color }); e.push(a) } this.optimizeOverlapping && (e = this._getOptimizedRects(e)); var c = new fabric.Group(e); this.shadow && c.set("shadow", new fabric.Shadow(this.shadow)), this.canvas.fire("before:path:created", { path: c }), this.canvas.add(c), this.canvas.fire("path:created", { path: c }), this.canvas.clearContext(this.canvas.contextTop), this._resetShadow(), this.canvas.renderOnAddRemove = t, this.canvas.requestRenderAll()}留神下面的正文，找到 circle 那段就是本例的重点
以上就是喷雾的根底用法，如果都搞明确了，那就做2个案例练练手呗~
批改喷点图形
喷雾的生成其实要害是在 onMouseUp 事件。
咱们看到官网的代码中，生成喷雾应用了 Reat 元素作为喷点
我有个大胆的想法，如果把 Rect 改成其余元素是否能够生成其余图形的喷雾呢？
于是我用了 圆形 Circle 。
// 省略局部代码sprayBrush.onMouseUp = function() { var t = this.canvas.renderOnAddRemove; this.canvas.renderOnAddRemove = !1; for (var e = [], i = 0, r = this.sprayChunks.length; i < r; i++) for (let n = this.sprayChunks[i], s = 0, o = n.length; s < o; s++) { // 改成圆形喷头 ！！！！！！！！！！！！！！！！！ const circle = new fabric.Circle({ radius: n[s].width, top: n[s].y + 1, left: n[s].x + 1, originX: "center", originY: "center", fill: this.color }) e.push(circle) } this.optimizeOverlapping && (e = this._getOptimizedRects(e)); let c = new fabric.Group(e); this.shadow && c.set("shadow", new fabric.Shadow(this.shadow)), this.canvas.fire("before:path:created", { path: c }), this.canvas.add(c), this.canvas.fire("path:created", { path: c }), this.canvas.clearContext(this.canvas.contextTop), this._resetShadow(), this.canvas.renderOnAddRemove = t, this.canvas.requestRenderAll()}留神下面的代码正文，搜寻 Circle 那行看看吧，这是批改喷点图形的关键点。
这个圆形喷雾是不是有点像 圆形笔刷 CircleBrush 的成果~
喷点除了改成圆形，还能够设置成其余图形，其余图形能够查看 Fabric.js 入门 - 根底图形 。
甚至还能自定义图形。
要实现这种自定义图形，能够查看 Fabric.js 自定义子类，创立属于本人的图形 ，而后在 onMouseUp() 事件中，把图形改成本人创立的那个即可。
随机色喷雾
了解了后面 “批改喷点图形” 的话，那要搞个随机色喷雾也是洒洒水啦~
只需把每个图形的 fill 设置成不一样就行了。
sprayBrush.onMouseUp = function() { var t = this.canvas.renderOnAddRemove; this.canvas.renderOnAddRemove = !1; for (var e = [], i = 0, r = this.sprayChunks.length; i < r; i++) for (let n = this.sprayChunks[i], s = 0, o = n.length; s < o; s++) { // 每个点都生成本人的随机色（rgb）！！！！！！！！！！！！！！！ let r = Math.floor(Math.random() * 255) let g = Math.floor(Math.random() * 255) let b = Math.floor(Math.random() * 255) let rect = new fabric.Rect({ width: n[s].width, height: n[s].width, left: n[s].x + 1, top: n[s].y + 1, originX: "center", originY: "center", fill: `rgb(${r}, ${g}, ${b})` // 每个图形的填充色都不一样了！！！！！！！！！！！ }); e.push(rect) } this.optimizeOverlapping && (e = this._getOptimizedRects(e)); let c = new fabric.Group(e); this.shadow && c.set("shadow", new fabric.Shadow(this.shadow)), this.canvas.fire("before:path:created", { path: c }), this.canvas.add(c), this.canvas.fire("path:created", { path: c }), this.canvas.clearContext(this.canvas.contextTop), this._resetShadow(), this.canvas.renderOnAddRemove = t, this.canvas.requestRenderAll()}好了，下面这个案例其实只是提供一个思路。这种随机色的配色是真的丑。。。
代码仓库
⭐ 喷雾笔刷
举荐浏览
《Fabric.js 从入门到_ _ _ _》
《Fabric.js 铅笔笔刷》
《Fabric.js 拖拽平移画布》
《Fabric.js 应用图片遮蔽画布（前景图）》
点赞 + 关注 + 珍藏 = 学会了
代码仓库