认识各种 Fabricjs 提供的物件型态

前言

我们在前几天常常用到 new fabric.Rect 来快速的建立矩形。其实 Fabricjs 还有更多能够建立的图形，如以下

基本图型有：

fabric.Circle 圆形
fabric.Ellipse 椭圆
fabric.Line 线条
fabric.Polygon 多边形
fabric.Polyline 折线
fabric.Rect 矩形
fabric.Triangle 三角形
其他的还有：

fabric.iText 可编辑文字
fabric.Text 文字
fabric.Image 图像
fabric.Path 复杂路径
7 种基本图型

fabric.Circle

圆形必须要提供 radius 这个属性

const circle = new fabric.Circle({
  radius: 30,
  fill: 'red', // 填色,
  top: 10,
  left: 0
})
canvas.add(circle)

fabric.Ellipse

椭圆形必须要提供 rx 和 ry 属性

const ellipse = new fabric.Ellipse({
  rx: 20, // 必有栏位
  ry: 30, // 必有栏位
  top: 10,
  left: 90,
  fill: 'green'
})
canvas.add(ellipse)

fabric.Line

线条物件的建构子较上面有些不同的是:
需先提供一个阵列 [x1, y1, x2, y2]
而 strokeWidth 线条的粗细，则是要有的设定

也就是两点让我们得到一个直线!

const line = new fabric.Line([50, 50, 200, 100], {
  stroke: 'blue',
  strokeWidth: 2, // 必有栏位
  top: 60,
  left: 30
})
canvas.add(line)

fabric.Polygon

多边形则是需要提供一个阵列裡面存放座标物件
[{x1, y1}, {x2, y2}, {x3, y3}]

至少要三个点呦！

var polygon = new fabric.Polygon([
  {x: 200, y: 0},
  {x: 250, y: 50},
  {x: 250, y: 100},
  {x: 200, y: 150},
  {x: 150, y: 100},
  {x: 150, y: 50} ], {
    left: 150,
    top: 10,
    angle: 40,
    fill: 'blue'
  }
)
canvas.add(polygon)

fabric.Polyline

必须提供多个座标，就会自己将线连起来囉！

预设会有填满顏色，只要把 fill 属性改成 transparent 就不会有填满色囉！

// 多点线
var polyline = new fabric.Polyline([
    { x: 10, y: 10 },
    { x: 50, y: 20 },
    { x: 30, y: 30 },
    { x: 40, y: 40 },
    { x: 60, y: 50 },
    { x: 20, y: 60 }
  ], {
  stroke: 'red',
  color: 'red',
  left: 300,
  top: 10,
  fill: 'transparent'
})
canvas.add(polyline)

fabric.Rect

矩形就不多说了～～之前创建很多次了

const rect = new fabric.Rect({
  width: 30, // 必有栏位
  height: 30, // 必有栏位
  top: 10,
  left: 120,
  fill: 'orange'
})
canvas.add(rect)

fabric.Triangle

三角形

const triangle = new fabric.Triangle({
  width: 30,
  height: 30,
  top: 10,
  left: 60
})
canvas.add(triangle)

文字

fabric.Text

这边 fabric.Text 是纯文字观看而不能让使用者自己修改喔！

const text = new fabric.Text('Hello 铁人赛', {
  left: 0,
  top: 80
})
canvas.add(text)

fabric.iText

这边 fabric.iText 是直接编辑的文字框，只要双击两下，就可以编辑文字了！

const iText = new fabric.IText('双击我编辑', {
  left: 0,
  top: 120
})
canvas.add(iText)

图像

fabric.Image

图片的部分稍微复杂一点，因為必须要选择图片的来源，这边有两种做法

载入 HTML 的 <img>
直接透过 URL 去取得
使用 img element

fabric.Image 必须透过 img 元素来新增物件，但我们必须等待图片资源完全载入完毕才能正常的绘製，所以用了 img.onload 的方法，等待图片载入完成才去 new fabric.Image。

// 这边可以直接抓取存在的 img 或是自己创建一个
const imgEl = document.createElement('img')
imgEl.src = 'https://www.123.com/shared/img/thumb/AMEMAN17826009_TP_V.jpg'
imgEl.onload = () => {
  const image = new fabric.Image(imgEl, {
    scaleX: 0.1, // 大小设置為原来的 0.1
    scaleY: 0.1, // 大小设置為原来的 0.1
    top: 160,
    angle: 15,
    left: 100
  })
  canvas.add(image)
}

使用 URL 取得 img

fabric.Image.fromURL 提供了一个可以使用 URL 绘图的方法，必须提供 URL 以及一个 callback function。

这个 callback 会在图片载入后被执行，并且得到一个 fabric.Image 的物件，我们可以透过 set() 方法去设定这个物件的相关属性，最后再将他们 add 进 canvas 里头

fabric.Image.fromURL('https://www.123.com/shared/img/thumb/AMEMAN17826009_TP_V.jpg', (img) => {
  const oImg = img.set({
      left: 300,
      top: 100,
      angle: 15,
      width: 500,
      height: 500
  })
  canvas.add(oImg) // 记得还是要加进 canvas 才会显示出来呦
})

路径

fabric.Path

我们可以透过建立一个新的 Path 来提供更加复杂的图形。

我们知道 svg 是由许多的 path 所组成的向量图形，Fabric 也能够解析复杂的 svg 图形到 canvas 上，并且将这些复杂的路径群组起来，让你能够非常轻鬆的匯入 svg 向量图！。

我们先自己试试做出一个 Path 物件

var path = new fabric.Path('M 0 0 L 200 100 L 170 200 z',{
  left: 10,
  top: 200
})
canvas.add(path)

我们看到 'M 0 0 L 200 100 L 170 200 z' 这串神奇的字串，M 代表 move 表示移动画笔到 (0,0) 的位置，L 代表 line 表示画一条线 (0, 0) 到 (200, 100)，z 表示我们要结束这次的路径并完成一个图形。

但通常要完成一个复杂的图形，并不会那麼的简单，可能会像

M121.32,0L44.58,0C36.67,0,29.5,3.22,24.31,8.41\ c-5.19,5.19-8.41,12.37-8.41,20.28c0,15.82,12.87,28.69,28.69,28.69c0,0,4.4,\ 0,7.48,0C36.66,72.78,8.4,101.04,8.4,101.04C2.98,106.45,0,113.66,0,121.32\ c0,7.66,2.98,14.87,8.4,20.29l0,0c5.42,5.42,12.62,8.4,20.28,8.4c7.66,0,14.87\ -2.98,20.29-8.4c0,0,28.26-28.25,43.66-43.66c0,3.08,0,7.48,0,7.48c0,15.82,\ 12.87,28.69,28.69,28.69c7.66,0,14.87-2.99,20.29-8.4c5.42-5.42,8.4-12.62,8.4\ -20.28l0-76.74c0-7.66-2.98-14.87-8.4-20.29C136.19,2.98,128.98,0,121.32,0z

阅读起来如此艰难

所以我们不会这样编写，我们可以直接将 svg 匯入进 canvas
透过 fabric.loadSVGFromURL 或 fabric.loadSVGFromString

小结

fabric.Circle 圆形
fabric.Ellipse 椭圆
fabric.Line 线条
fabric.Polygon 多边形
fabric.Polyline 折线
fabric.Rect 矩形
fabric.Triangle 三角形
fabric.iText 可编辑文字
fabric.Text 文字
fabric.Image 图像
fabric.Path 复杂路径
记得都要用 canvas.add 加进画布里面呦