关于前端:Fabricjs-基础笔刷

45次阅读

共计 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 即可开启,这一步很重要,只有设置 isDrawingModetrue,本文接下来的操作才有意义。

如果不想在初始化时设置 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 之外,还有 buttsquare 可选。默认是 round

画笔的角落格调

canvas.freeDrawingBrush.strokeLineJoin = 'miter'

除了 miter 外,还能够抉择 bevelround

设置笔刷的最大斜接长度

canvas.freeDrawingBrush.strokeLineJoin = 'miter' // 画笔的角落格调
canvas.freeDrawingBrush.strokeMiterLimit = 10 // 最大斜接长度 

strokeMiterLimit 属性的设置实用于 strokeLineJoinmiter 的状况。

啰嗦两句

笔刷在 Fabric.js 中是一个很根底的工具,也很罕用。

罕用场景:

  1. 在线 PS 画板
  2. 在线批改操作

像微信截图那些,也有画笔性能。当然,微信截图的画笔不肯定是用 Fabric.js 来实现的,但咱们学会 Fabric.js 后也能够说是有能力实现相似的性能了~

Fabric.js 还提供了其余笔刷,但如果你曾经懂得如何应用根底笔刷,那学其余笔刷会更容易上手。

代码仓库

⭐ 原生版本的代码

举荐浏览

  • 👍《Fabric.js 自在绘制椭圆》
  • 👍《Fabric.js 橡皮擦的用法(蕴含复原性能)》
  • 👍《Fabric.js 自定义右键菜单》
  • 👍《Fabric.js 从入门到收缩》

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

正文完
 0