Fabric.js绘画功能介绍

 今天要来介绍 Fabricjs 的绘画功能，只要切换一个变数，就能够轻鬆的将 Fabricjs 原本的物件移动模式，改变成绘画模式，每一个 Fabricjs 绘画出来的线条，都会被新增成 Fabric.Path，当我们切回去物件操作模式时，我们一样能够像其他物件一样，自由的操控我们绘画出来的线条。

并且能够自订自己的笔刷样式，让绘图功能变得更加丰富。

绘图模式

切换至绘图模式

透过 canvas.isDrawingMode = true 将画布切换到绘画模式。
切换后做鼠标拖曳的动作会就会对画布做出细细的铅笔笔跡。

若将此属性设為 false 就為预设的操作物件模式。而我们刚刚所画出来的线条，就会变回物件的型态，物件為 fabric.Path 的型态。


切换画笔样式

设定 canvas.freeDrawingBrush.color 可改变笔刷的顏色。

此属性可使用 hex rgba 顏色。
设定后顏色就会被改变

设定 canvas.freeDrawingBrush.width 改变笔刷大小

设定画笔宽度，宽度单位為 pixel 不可為小数。

设定 canvas.freeDrawingBrush.shadow 為笔刷加入阴影样式

可直接使用和 css 相同模式新增阴影。

canvas.freeDrawingBrush.color = 'rgba(255,0,0, 0.3)'
canvas.freeDrawingBrush.width = 10
canvas.freeDrawingBrush.shadow = '10px 10px rgba(0, 0, 0, 0.5)'

阴影怎麼会这样??

透过上面的 gif 我们发现我们在画完图形放开滑鼠后，阴影才被加上去。
使用 Fabricjs 内建的阴影类别 new fabric.Shadow 阴影才有在绘画时更新。

// 将阴影改成这样
canvas.freeDrawingBrush.shadow = new fabric.Shadow({
        blur: 10,
        offsetX: 10,
        offsetY: 10,
        affectStroke: true,
        color: 'black',
      })

或是使用 canvas.freeDrawingBrush.setShadow() 可使用 css 阴影或是传入阴影参数。

canvas.freeDrawingBrush.setShadow('10px 10px black')

这样就可以即时的把阴影一起画上去囉！


改变笔刷样式

Fabricjs 预设是使用铅笔的笔刷样式。
接下来要介绍更多不同 Fabricjs 内建的笔刷样式。
Fabricjs 提供了下面几个简单的基础样式可使用。

fabric.PencilBrush
fabric.CircleBrush
fabric.SprayBrush
改变 canvas.freeDrawingBrush 属性来变更笔刷样式。

改变笔刷后，一样可以透过 freeDrawingBrush.color 和 freeDrawingBrush.width，来调整笔刷顏色。

须注意因為是使用 new 取得新的物件，所以原本画笔的顏色和粗细相关设定会被重製，若有需要继续使用须自己转存。
圆形笔刷

绘製出大小不一的圆形

canvas.freeDrawingBrush = new fabric.CircleBrush(canvas)
canvas.freeDrawingBrush.color = 'rgba(255,0,0, 0.3)'
canvas.freeDrawingBrush.width = 10

喷雾笔刷

canvas.freeDrawingBrush = new fabric.SprayBrush(canvas)

自订笔刷

强大的自订笔刷功能 fabric.PatternBrush 这个类别让我们能够自订笔刷，概念就像盖印章，必须建立一个 canvas 必且绘製一个图形，PatternBrush 收到后就会重复绘製你所自订的图形，让我们来看看范例。

const squareBrush = new fabric.PatternBrush(canvas)
// getPatternSrc  取得要重复绘製的图形 Canvas
squareBrush.getPatternSrc = function() {
  const squareWidth = 30
  const squareDistance = 2
  // 创立一个暂存 canvas 来绘製要画的图案
  const patternCanvas = fabric.document.createElement('canvas')
  // canvas 总大小為每一格画笔的大小
  patternCanvas.width = patternCanvas.height = squareWidth + squareDistance

  const ctx = patternCanvas.getContext('2d')

  ctx.fillStyle = this.color
  ctx.fillRect(0, 0, squareWidth, squareWidth)
  // 回传绘製完毕的 canvas
  return patternCanvas
}

canvas.freeDrawingBrush = squareBrush
简单来说我们新增 new fabric.PatternBrush 类别。
并且使用 getPatternSrc 方法回传绘製完毕的 canvas。
最后在把 canvas.freeDrawingBrush = squareBrush

因為使用自製的 canvas，我们可以很方便自由的创造自己的笔刷样式，让笔刷变得更加多元有趣。