关于前端:Fabricjs-圆形笔刷

继续创作，减速成长！这是我参加「掘金日新打算 · 6 月更文挑战」的第 8 天，点击查看流动详情

本文简介

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

本文介绍 Fabric.js 的圆形笔刷性能。

圆形笔刷是作用在 “自在绘制” 的画笔之上的。从名字就能够看出，这个笔刷会用一个个圆形来填充绘制的门路。

看图会更直观

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>
  // 写法 1
  const canvas = new fabric.Canvas('c', {isDrawingMode: true // 开启绘画模式})
  
  // 写法 2
  // const canvas = new fabric.Canvas('c')
  // canvas.isDrawingMode = true
</script>

要将画布设置成 绘画模式 ，须要将 isDrawingMode 设置为 true。

下面两种写法选一种即可。

开启圆形笔刷

将笔刷设置成圆形同样有 2 种写法。

写法 1

// 省略初始化代码

canvas.freeDrawingBrush = new fabric.CircleBrush(canvas)

写法 2

// 省略初始化代码

let circleBrush = new fabric.CircleBrush()
circleBrush.initialize(canvas)
canvas.freeDrawingBrush = circleBrush

下面两种写法用那种都行，但都会相应影响后续的代码量。

如果你后续要常常批改画笔的属性，我倡议用 写法 2 。

设置笔刷宽度

如果下面那步你应用了 写法 1 ，要设置笔刷宽度须要这样写

// 省略初始化代码

canvas.freeDrawingBrush = new fabric.CircleBrush(canvas) // 创立圆形笔刷

canvas.freeDrawingBrush.width = 6 // 笔刷宽度，默认 10

如果你应用了 写法 2 ，设置的代码如下所示

// 省略初始化代码

// 创立圆形笔刷
let circleBrush = new fabric.CircleBrush()
circleBrush.initialize(canvas)
canvas.freeDrawingBrush = circleBrush

circleBrush.width = 30

设置笔刷色彩

// 省略初始化代码

circleBrush.color = 'pink'

我将笔刷设置成粉红色了，除了关键字色彩，还反对 rgb 等设置办法

circleBrush.color = '#c123a8'

circleBrush.color = 'rgb(10, 230, 120)'

设置暗影

// 省略初始化代码

circleBrush.shadow = new fabric.Shadow({
  blur: 10, // 羽化水平
  offsetX: 20, // x 轴偏移量
  offsetY: 20, // y 轴偏移量
  color: '#30e3ca' // 投影色彩
})

和 根底笔刷 设置暗影的办法是一样的。

罕用办法

罕用的办法也有几个，但有局部是须要留神的，要组合应用才有成果。

鼠标按下

// 省略初始化代码

circleBrush.onMouseDown = function (pointer, e) {console.log(pointer)
  console.log(e)
}

应用 onMouseDown 能够设置鼠标按下时要触发的事件。该事件有 2 个参数。

鼠标松开

// 省略初始化代码

circleBrush.onMouseUp = function (pointer) {console.log(pointer)
}

和“鼠标按下”一样简略。应用 onMouseUp 能够设置鼠标松开的事件。

鼠标挪动时

// 省略初始化代码

circleBrush.onMouseMove = function (pointer, e) {console.log(pointer)
  console.log(e)
  circleBrush.drawDot(pointer)
}

应用 onMouseMove 能够设置鼠标挪动时的事件。但在该事件中还须要执行 drawDot 事件，并传入以后鼠标地位能力进行正确绘制。

在鼠标挪动事件中还能增加更多办法，比方在绘制的根底上，在左近再画多一条线

// 省略初始化代码

circleBrush.onMouseMove = function (pointer, e) {console.log(pointer)
  console.log(e)
  circleBrush.drawDot(pointer)
  circleBrush.addPoint({x: pointer.x + 50, y: pointer.y + 50}) // 在左近话多一条线
}

以上就是 Fabric 圆形笔刷的罕用玩法~

代码仓库

⭐ 原生版本的代码

举荐浏览

• 👍《Fabric.js 笔刷到底怎么用？》
• 👍《Fabric.js 自在绘制椭圆》
• 👍《Fabric.js 橡皮擦的用法（蕴含复原性能）》
• 👍《Fabric.js 自定义右键菜单》
• 👍《Fabric.js 从入门到收缩》

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