本文简介

点赞 + 关注 + 收藏 = 学会了

喷雾笔刷 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 = sprayBrush

initialize() 是 SprayBrush 初始化的一个方法，里面接收的参数是当前的画布 canvas 。

设置笔刷粗细

为了方便其他属性演示，所以先把笔刷的宽度设置大点。

// 省略部分代码sprayBrush.width = 200

width 属性就是用来设置画笔粗细的，数值越大画笔就越粗。

设置喷雾密度

可以使用 density 属性设置喷雾密度，数值越大密度就越大。

density 的默认值是 20。

// 省略部分代码sprayBrush.width = 200
sprayBrush.density = 100 // 设置喷雾密度

将 density 设置得小点对比一下

sprayBrush.width = 200
sprayBrush.density = 10

很直观的看到差距了。

设置喷点大小

“喷点” 就是喷雾中的每一个点，设置喷点宽度的属性名叫 dotWidth 。

dotWidth 默认值是 1。数值越大，喷点就越大。

// 省略部分代码sprayBrush.width = 200 // 设置喷雾宽度sprayBrush.dotWidth = 10 // 设置喷点大小

设置喷点方差

可以使用 dotWidthVariance 属性设置喷点的方差。

dotWidthVariance 可以在规定范围内随机生成大小不一的喷点。

dotWidthVariance 的默认值是1。数值越大，喷点随机大小就越大。

// 省略部分代码sprayBrush.width = 200
sprayBrush.dotWidthVariance = 10

设置了 dotWidthVariance 后，dotWidth 的意义就不大了。

防重叠

喷雾笔刷默认是会删除重叠的点，官方文档说这是处于性能考虑的原因。

如果不希望删除重叠的点，可以将 optimizeOverlapping 设为 false 。

// 省略部分代码sprayBrush.optimizeOverlapping = false

设置喷点的随机不透明度

可以通过 randomOpacity 属性设置喷点的不透明度是否随机。

// 省略部分代码sprayBrush.randomOpacity = true

设置喷雾阴影

在喷雾笔刷的文档里没提到阴影，但既然基础笔刷可以设置阴影，喷雾笔刷同样也可以设置阴影的。

// 省略部分代码sprayBrush.width = 200
sprayBrush.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个案例练练手呗~

Fabric.js 喷雾笔刷从入门到放肆相关推荐

Fabric.js 铅笔笔刷
本文简介点赞 + 关注 + 收藏 = 学会了 fabric.js 的铅笔其实是继承基础画笔的一个工具,在基础画笔的基础上多了"拐角平滑度"等配置项. 本文讲解铅笔的基础用法以及常 ...
Fabric.js 图案画笔(笔刷)
theme: smartblue 本文简介带尬猴,我是德育处主任 Fabric.js 有图案画笔功能,这个功能可以简单理解成"刮刮卡"效果. 如果只是看 Fabric.js 文档 ...
procreate 笔刷_Procreate新手漫画入门：笔刷，图层，上色
上个月新入手了一个新的ipad,又打开了一种关于漫画的新的可能性~同时验证了那句话:对生活保持好奇,你将收获更多. 于是就有一些喜欢画画的小伙伴有私信这样的漫画怎么画的? 这个秘密工具就是:ipad ...
用p5.js实现动态形状笔刷
用p5.js实现动态创意画板跟之前两篇文章有关联的是,这次也是为了互动媒体大作业写了一篇博客. 这次的作业内容是编写一个绘画系统,提供一系列绘画颜料给用户操作,这颜料可以是画笔.颜料或者滤镜的形式, ...
19号笔刷是哪个_原画教程：小白原画快速入门，19号笔刷到底为何物？
一.19号笔刷到底为何物? 经常听到很多CG艺术家们说,只要用好了19号笔刷,其它的笔刷都是浮云了,我从头到尾都只用了19号笔刷哦.那么这个笔刷有什么特别的魔力,19号笔刷到底为何物?又该如何使用呢? ...
Fabric.js 基础画笔的用法 BaseBrush
theme: smartblue 本文简介点赞 + 关注 + 收藏 = 学会了本文介绍 Fabric.js 的基础笔刷用法.如果你还不知道 Fabric.js 是什么,我墙裂建议你阅读一下 < ...
procreate 笔刷_Procreate笔刷怎么用？初学者必看！！！（含笔刷设置）
Procreate笔刷有什么用?Procreate笔刷怎么使用?如何在手机学习绘画?如何在平板学习绘画?学习绘画难吗?怎样才能学好绘画?想必这些都是绘画初学者们经常在想的问题吧,想要利用手机或者平板电 ...
HTML5 Canvas 自定义笔刷
1. [图片] QQ截图20120715095110.png 2. [代码][HTML]代码 <!DOCTYPE html> <html lang="en" ...
笔刷怎么做_原来是这样：用PS笔刷做出颜料肌理效果！
题图插画 | TX灼灼 " 当我意识到可以利用PS的某些工具, 设置不同的画笔之后, 一切都变了. 有些看起来很不合逻辑的组合, 最后产生的效果却是逼真的惊人, 再结合合适的形状就能创作出特 ...

Fabric.js 喷雾笔刷从入门到放肆

本文简介

常规配置

注册喷雾笔刷

设置笔刷粗细

设置喷雾密度

设置喷点大小

设置喷点方差

防重叠

设置喷点的随机不透明度

设置喷雾阴影

设置喷雾颜色

事件

喷雾准备生成前和生成后

鼠标按下时 onMouseDown

鼠标移动时 onMouseMove

松开鼠标时 onMouseUp

Fabric.js 喷雾笔刷从入门到放肆相关推荐

最新文章

热门文章

Fabric.js 喷雾笔刷从入门到放肆

本文简介

常规配置

注册喷雾笔刷

设置笔刷粗细

设置喷雾密度

设置喷点大小

设置喷点方差

防重叠

设置喷点的随机不透明度

设置喷雾阴影

设置喷雾颜色

事件

喷雾准备生成前和生成后

鼠标按下时 onMouseDown

鼠标移动时 onMouseMove

松开鼠标时 onMouseUp

insertAdIfNeeded();

Fabric.js 喷雾笔刷从入门到放肆相关推荐

最新文章

热门文章