本文简介

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

本文介绍 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 。

笔刷颜色文档

虚线

// 省略部分代码
canvas.freeDrawingBrush.strokeDashArray = [20, 50]

可以将数值型数组赋给 freeDrawingBrush.strokeDashArray。建议你尝试传入多个值，看看修改后的变化。

笔刷虚线文档

投影

// 省略部分代码
canvas.freeDrawingBrush.shadow = new fabric.Shadow({
  blur: 10,
  offsetX: 10,
  offsetY: 10,
  affectStroke: true,
  color: '#30e3ca'
})

使用 fabric.Shadow 设置一个投影属性，并把设置完的值赋给 freeDrawingBrush.shadow。

笔刷投影文档

设置投影参数文档

禁止画笔超出画板

默认情况下，画笔图画的范围可以超出画板，如下图这样

如果你不希望画笔涂抹范围超出当前画布可视范围，可以设置 freeDrawingBrush.limitedToCanvasSize 为 true

// 省略部分代码
canvas.freeDrawingBrush.limitedToCanvasSize = true

limitedToCanvasSize文档

除了以上的属性外，基础笔刷还有 strokeLineCap 、strokeLineJoin 、strokeMiterLimit 等属性。可以参照官方文档的说明去试试看。

代码仓库

本文代码

Fabric.js 基础画笔的用法 BaseBrush