关于前端:Fabricjs-铅笔笔刷

本文简介

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

fabric.js 的铅笔其实是继承根底画笔的一个工具，在根底画笔的根底上多了“拐角平滑度”等配置项。

本文解说铅笔的根底用法以及罕用事件。

惯例配置

真实世界的铅笔有不同的型号，色彩的深浅、笔芯的硬度都是不同的。

在 fabric.js 中，铅笔同样有不同配置。

开启绘图模式

要应用铅笔的话，首先要开启“绘图模式”。

上面这段代码是本文的根底代码，之后配置到的铅笔属性和铅笔相干的办法都是基于这段代码的根底。

引入 fabric.js 的代码我就不写了，如果不晓得如何引入能够查看《Fabric.js 从入门到收缩》。

<canvas id="canvas" width="500" height="400" style="border: 1px solid #ccc;"></canvas>

<script>
  var canvas = new fabric.Canvas('canvas', {isDrawingMode: true // 绘图模式})
</script>

将 isDrawingMode 设置为 true 就能够开启绘图模式了。此时在画布上按着鼠标左键就能绘画。

注册铅笔

要应用铅笔工具，须要将 canvas.freeDrawingBrush 设置成铅笔。

// 省略局部代码

var canvas = new fabric.Canvas('canvas', {isDrawingMode: true // 绘图模式})

// 实例化铅笔
let pencilBrush = new fabric.PencilBrush(canvas)
// 将画布的画笔设置成铅笔
canvas.freeDrawingBrush = pencilBrush

须要留神的是，在 new fabric.PencilBrush(canvas) 中须要传入 canvas。

除了在实例化期间传入 canvas，还能够调用 initialize 办法传入。

// 省略局部代码

// 创立铅笔
let pencilBrush = new fabric.PencilBrush()
// 初始化铅笔
pencilBrush.initialize(canvas)
// 将画笔设置成铅笔
canvas.freeDrawingBrush = pencilBrush

设置铅笔色彩

要设置的属性是 color

// 省略局部代码

pencilBrush.color = 'pink'

除了设置关键字，还能够通过十六进制的色彩值、rgba 等形式进行设置。

比方 pencilBrush.color = 'rgba(0, 0, 0, 0.1)' 就能设置一个具备透明度的彩色的画笔。

设置铅笔粗细

应用 width 能够设置铅笔的粗细，赋的值是数值类型的。

// 省略局部代码

pencilBrush.width = 10

暗影

须要应用 fabric.Shadow 创立暗影，再赋值给 shadow。

为了演示不便，我把铅笔的 width 设置成 10。

// 省略局部代码

// 加粗铅笔，不便演示
pencilBrush.width = 10

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

暗影 fabric.Shadow 配置项其实还有很多，这个例子次要配置了以下 4 个属性

• blur: 羽化水平，接管数值类型的值。
• offsetX: 暗影在 x 轴的偏移量，正值往右，负值往左。
• offsetY: 暗影在 y 轴的偏移量，正值往下，负值往上。
• color: 暗影色彩，能够应用色彩关键字、十六进制、rgba 等。

虚线

能够通过 strokeDashArray 将铅笔画进去的线条设置成虚线。

strokeDashArray 的值是一个数值类型的数组，数组能够接管 1 个或多个元素。

当只有 1 个元素时，虚线和实线的长度都相等。

// 省略局部代码

pencilBrush.strokeDashArray = [10]

当存在 2 个元素时，第一个元素代表实线长度，第二个元素代表虚线的长度。

// 省略局部代码

pencilBrush.strokeDashArray = [30, 10]

从上图能够看出，每段实线的长度是 30，每段虚线的长度是 10。

如果是 3 个参数以上的状况，就会始终“轮回”

// 省略局部代码

pencilBrush.strokeDashArray = [10, 20, 30]

下面代码的状况是这样的

实线 10, 虚线 20, 实线 30, 虚线 10, 实线 20, 虚线 30, 实线 10, ......

如果是 4 个、5 个以上的参数，也是这样始终循环上来。

线帽

线帽就是线条两端的款式，能够应用 strokeLineCap 设置线帽款式，可选值有 butt、round 和 square。

默认是 round，也就是圆形线帽。

// 省略局部代码

pencilBrush.width = 10 // 加粗
pencilBrush.strokeLineCap = 'round' // 批改线帽

如果 square 就是方形的头

// 省略局部代码

pencilBrush.width = 10 // 加粗
pencilBrush.strokeLineCap = 'square' // 批改线帽

最初一个是无线冒 butt

// 省略局部代码

pencilBrush.width = 10 // 加粗
pencilBrush.strokeLineCap = 'butt' // 批改线帽

看上去 butt 和 square 如同有点像，但其实是不一样的。

如果线段长度一样，square 和 round 都会在线的两端加上线帽，会增长线的长度。

角落格调

比方字母 V 的尖尖就是“拐角”。

fabric.js 的铅笔能够通过 strokeLineJoin 属性设置拐角，反对 bevel 斜面、round 圆形、miter 斜面 三个属性。

// 省略局部代码

pencilBrush.strokeLineJoin = 'miter', // "bevel" 斜面, "round" 圆形, "miter" 斜面

最大斜接长度

strokeMiterLimit 属性的设置实用于 strokeLineJoin 为 miter 的状况。

pencilBrush.strokeMiterLimit = 20

拐角平滑度

这是一个很有意思的属性：decimate 。

通过设置 decimate 能够批改拐角的平滑度，数值越大就越平滑。

pencilBrush.width = 5 // 加粗
pencilBrush.decimate = 40

禁止超出画布

如果将铅笔的 limitedToCanvasSize 属性设置为 true，在绘制的过程中画笔就不能超出画布了。

// 省略局部代码

pencilBrush.width = 5 // 加粗
pencilBrush.limitedToCanvasSize = true // 禁止画笔超出画布

绘制直线

应用铅笔时，默认按住 shift 键能够绘制直线

如果你想批改画直线的组合键，能够设置 straightLineKey 属性。

// 省略局部代码

pencilBrush.straightLineKey = 'shiftKey'

straightLineKey 反对以下配置：

• shiftKey: shift 键，默认
• altKey: alt 键
• ctrlKey: ctrl 键
• 'none'、’undefined’、’null’: 勾销组合键

事件

fabric.js 的铅笔提供了一些根底事件，有的好用，有的不好用。。。

筹备生成线路时：before:path:created

// 省略局部代码

canvas.on('before:path:created', opt => {console.log(opt.path)
})

线路生成结束时：path:created

// 省略局部代码

canvas.on('path:created', function(opt) {console.log(opt.path)
})

鼠标点击时：onMouseDown

// 省略局部代码

pencilBrush.onMouseDown = function(t, e) {console.log(t)
  console.log(e)

  this.canvas._isMainEvent(e.e) &&
  (this.drawStraightLine = e.e[this.straightLineKey],
    this._prepareForDrawing(t),
    this._captureDrawingPath(t),
    this._render())
}

参数 t 是鼠标点击时的坐标 {x, y}。

参数 e 蕴含事件自身，还有坐标点。

能够将 t 和 e 输入到控制台看看。

onMouseDown 事件最好应用一般函数，而且要在最初写上这两句：

this._prepareForDrawing(t)
this._render()

鼠标挪动时：onMouseMove

pencilBrush.onMouseMove = function(t, e) {console.log(t)
  console.log(e)

  if (this.canvas._isMainEvent(e.e) && (this.drawStraightLine = e.e[this.straightLineKey],
    (!0 !== this.limitedToCanvasSize || !this._isOutSideCanvas(t)) && this._captureDrawingPath(t) && 1 < this._points.length)
  ) {if (this.needsFullRender()) {this.canvas.clearContext(this.canvas.contextTop)
      this._render()}
    else {
      var i = this._points
        , r = i.length
        , n = this.canvas.contextTop

      this._saveAndTransform(n)
      this.oldEnd && 
        (n.beginPath(),
          n.moveTo(this.oldEnd.x, this.oldEnd.y)
        )

      this.oldEnd = this._drawSegment(n, i[r - 2], i[r - 1], !0)
      n.stroke()
      n.restore()}
  }
}

鼠标松开时：onMouseUp

pencilBrush.onMouseUp = function(t) {console.log(t)

  return !this.canvas._isMainEvent(t.e) || 
    (
      this.drawStraightLine = !1,
      this.oldEnd = void 0,
      this._finalizeAndAddPath(),
      !1
    )
}

代码仓库

⭐ 铅笔

举荐浏览

👍《Fabric.js 从入门到_ _ _ _》

👍《Fabric.js 应用图片遮蔽画布（前景图）》

👍《Fabric.js 设置容器类名要留神这几点》

👍《Fabric.js 自定义子类，创立属于本人的图形》

点赞 + 关注 + 珍藏 = 学会了
代码仓库