Fabric.js 讲解官方demo：Stickman

本文简介

戴尬猴，我是德育处主任

Fabric.js 官网有很多有趣的Demo，不仅可以帮助我们了解其功能，还可以为我们提供创意灵感。其中，Stickman是一个非常有趣的例子。

先看看效果图

file

从上图可以看出，在拖拽圆形时，跟圆形相连的那条红线的一端也会跟着移动。

原理讲解

对 Fabric.js 有一定了解的工友可以先自己看看官方案例。

还不了解 Fabric.js 的可以看看《Fabric.js从入门到？？？》

这个案例的代码其实不长，案例中用到的方法我在之前的文章中基本有提到过。

简单罗列一下案例中用到的方法：

originX 和 originY 的值都等于 center
创建圆和线的方法：new fabric.Circle 和 new fabric.Line
object.set 方法
canvas.renderAll 方法

打开就这几步操作啦，是不是很简单。

其原理是，创建圆形的时候，这个圆要和一根或者多根红线的其中一端绑定。在移动圆的时候，绑定的线跟着移动。（说了等于没说，哈哈哈哈）

但官方案例中的难点是有多根线和多个圆，对于刚接触 Fabric.js 的工友来说不太友好。

我们就先从1根线和1个圆讲起！

编码环节

首先创建一根直线和一个圆形（把手）。

看过《Fabric.js从入门到？？？》的工友应该非常清楚如何创建一线和圆形。

但在这个例子中创建出来的元素要符合以下规则：

直线不能让用户直接操作。
直线的其中一端要和圆形绑定。
圆形移动时，直线被绑定的那端也要跟着移动。

file

我在代码中添加了详细的注释，仔细看～

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

<script src="https://unpkg.com/fabric@5.3.0/dist/fabric.min.js"></script>
<script>
  // 绑定画布元素
  const canvas = new fabric.Canvas('c')

  // 让全局的元素都以中心为原点（根据你实际业务需求去设置吧）
  fabric.Object.prototype.originX = 'center'
  fabric.Object.prototype.originY = 'center'

  // 创建直线
  let line = new fabric.Line(
    [ 50, 40, 200, 40 ], // 直线的4个坐标 [x1, y1, x2, y2]
    {
      fill: 'red', // 直线填充颜色
      stroke: 'red', // 直线边框颜色
      strokeWidth: 5, // 直线边框粗细
      selectable: false, // 当设置为“ false”时，不能选择对象进行修改(使用基于点击或基于组的选择)。但事情还是发生了。
      evented: false, // 当设置为“ false”时，对象不能成为事件的目标。所有事件都会通过它传播。
    }
  )

  // 创建圆形
  let circle = new fabric.Circle({
    left: line.get('x1'), // 圆形x坐标，用了直线的起点的x坐标
    top: line.get('y1'), // 圆形y坐标，用了直线的起点的y坐标
    strokeWidth: 5,
    radius: 12, // 半径
    fill: '#fff',
    stroke: '#666',
    hasControls: false, // 当设置为“ false”时，对象的控件不会显示，也不能用于操作对象
    hasBorders: false // 当设置为“ false”时，不呈现对象的控制边框
  })

  // 将直线和圆形添加到画布中
  canvas.add(line, circle)

  // 移动元素时触发的事件
  canvas.on('object:moving', function(e) {
    // 因为本例只有圆形能移动，所以我在函数中并没有去判断当前操作的是什么元素
    var p = e.target // 获取当前移动的元素
    line.set({'x1': p.left, 'y1': p.top}) // 将直线的起点坐标的x和y设置成圆形的left和top
    canvas.renderAll() // 重新渲染画布
  })
</script>

经过上面的一番操作，当用户移动圆形时，直线被绑定的那端也会跟着移动。

如果你理解了上面的代码，再看看官方的案例应该就能理解了。