共计 1852 个字符,预计需要花费 5 分钟才能阅读完成。
本文简介
点赞 + 关注 + 珍藏 = 学会了
Fabric.js
开启绘画模式后,能够设置画笔的款式。
画笔又分好几种, 本文次要介绍 Fabric
根底画笔的用法 。
之前写过《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>
const canvas = new fabric.Canvas('c', {isDrawingMode: true // 开启绘画模式})
</script>
将 isDrawingMode
设为 true
即可开启,这一步很重要,只有设置 isDrawingMode
为 true
,本文接下来的操作才有意义。
如果不想在初始化时设置 isDrawingMode
,也能够在前期应用 canvas.isDrawingMode = true
的形式进行设置。
留神:接下来所有操作都是基于 “起步” 的代码进行的!!!
设置笔刷宽度
// 省略“起步”代码
canvas.freeDrawingBrush.width = 20 // 画笔宽度
能够通过批改 width
调节笔刷的粗细。
设置笔刷色彩
// 省略“起步”代码
canvas.freeDrawingBrush.width = 20 // 画笔宽度
canvas.freeDrawingBrush.color = 'pink' // 画笔色彩
我将笔刷的宽度设为 20,这样比拟容易展现成果。
虚线
// 省略“起步”代码
canvas.freeDrawingBrush.width = 20 // 画笔宽度
canvas.freeDrawingBrush.strokeDashArray = [20, 50] // 行程破折号数组
应用 strokeDashArray
能够设置虚线,外面还能够传 2 个以上的参数,成果本人试试就明确了。
投影
// 省略“起步”代码
canvas.freeDrawingBrush.width = 20 // 画笔宽度
// 画笔投影
canvas.freeDrawingBrush.shadow = new fabric.Shadow({
blur: 10, // 羽化水平
offsetX: 10, // x 轴偏移量
offsetY: 10, // y 轴偏移量
color: '#30e3ca' // 投影色彩
})
自在绘制被限度为画布大小
// 省略“起步”代码
canvas.freeDrawingBrush.width = 20 // 画笔宽度
canvas.freeDrawingBrush.limitedToCanvasSize = true // 当“true”时,自在绘制被限度为画布大小。
线条结尾的画笔格调
canvas.freeDrawingBrush.strokeLineCap = 'round'
除了 round
之外,还有 butt
或 square
可选。默认是 round
。
画笔的角落格调
canvas.freeDrawingBrush.strokeLineJoin = 'miter'
除了 miter
外,还能够抉择 bevel
或 round
。
设置笔刷的最大斜接长度
canvas.freeDrawingBrush.strokeLineJoin = 'miter' // 画笔的角落格调
canvas.freeDrawingBrush.strokeMiterLimit = 10 // 最大斜接长度
strokeMiterLimit
属性的设置实用于 strokeLineJoin
为 miter
的状况。
啰嗦两句
笔刷在 Fabric.js
中是一个很根底的工具,也很罕用。
罕用场景:
- 在线 PS 画板
- 在线批改操作
像微信截图那些,也有画笔性能。当然,微信截图的画笔不肯定是用 Fabric.js
来实现的,但咱们学会 Fabric.js
后也能够说是有能力实现相似的性能了~
Fabric.js
还提供了其余笔刷,但如果你曾经懂得如何应用根底笔刷,那学其余笔刷会更容易上手。
代码仓库
⭐ 原生版本的代码
举荐浏览
- 👍《Fabric.js 自在绘制椭圆》
- 👍《Fabric.js 橡皮擦的用法(蕴含复原性能)》
- 👍《Fabric.js 自定义右键菜单》
- 👍《Fabric.js 从入门到收缩》
点赞 + 关注 + 珍藏 = 学会了