theme: smartblue
本文简介
点赞 + 关注 + 收藏 = 学会了
本文介绍 Fabric.js 的基础笔刷用法。如果你还不知道 Fabric.js 是什么，我墙裂建议你阅读一下 《Fabric.js 从入门到膨胀》 。
本文使用
Fabric.js 5.2.1进行讲解。
用法
使用 基础笔刷 之前，必须将画板设置成 绘画模式 canvas.isDrawingMode = true 。
创建项目
- 创建一个
html文件 - 在页面上创建一个
canvas元素 - 引入
Fabric.js - 初始化画布
- 将画布设置成绘画模式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>基础笔刷 BaseBrush</title> </head> <body> <!-- 创建 canvas 元素 --> <canvas id="c" width="600" height="400" style="border: 1px solid #ccc;"></canvas> <!-- 引入 fabric.js --> <script src="../../script/fabric.5.2.1.js"></script> <script> // 初始化画布 const canvas = new fabric.Canvas('c') // 将画布设置成绘画模式 canvas.isDrawingMode = true </script> </body> </html>
此时在页面上就能进行自由绘制了。
画笔宽度
// 省略部分代码 canvas.freeDrawingBrush.width = 30
可以将一个数值型数据赋给 freeDrawingBrush.width 。
画笔颜色
// 省略部分代码 canvas.freeDrawingBrush.color = 'pink'
在这个例子里，我把笔刷设置成粉红色。
可以将字符串型的颜色值赋给 freeDrawingBrush.color 。
虚线
js // 省略部分代码 canvas.freeDrawingBrush.strokeDashArray = [20, 50]
可以将数值型数组赋给 freeDrawingBrush.strokeDashArray。建议你尝试传入多个值，看看修改后的变化。
投影
js // 省略部分代码 canvas.freeDrawingBrush.shadow = new fabric.Shadow({ blur: 10, offsetX: 10, offsetY: 10, affectStroke: true, color: '#30e3ca' })
使用 fabric.Shadow 设置一个投影属性，并把设置完的值赋给 freeDrawingBrush.shadow。
禁止画笔超出画板
默认情况下，画笔图画的范围可以超出画板，如下图这样
如果你不希望画笔涂抹范围超出当前画布可视范围，可以设置 freeDrawingBrush.limitedToCanvasSize 为 true
js // 省略部分代码 canvas.freeDrawingBrush.limitedToCanvasSize = true
除了以上的属性外，基础笔刷还有 strokeLineCap 、strokeLineJoin 、strokeMiterLimit 等属性。可以参照官方文档的说明去试试看。