（转）第04节：Fabric.js用路径画不规则图形

Posted 2020-09-29 惊蛰1993

在Canvas上画方形、圆形、三角形都是很容易的，只要调用fabric对应的方法就可以了，但这些都是规则的图形，如果你想画一个不规则的图形,这时候你可以用fabric.js提供的路径绘图方法。所谓路径绘图就是用点和线的移动的方式进行绘图。通过对 线、曲线、弧的应用你可以非常复杂的图形。

我们先来看一段的代码：

var canvas = new fabric.Canvas(‘canvas‘);
var path = new fabric.Path(‘M 0 0 L 200 100 L 170 200 z‘);
path.set({ left: 120, top: 120,fill:‘red‘ });
canvas.add(path);

上边的代码需要注意的是第二行， fabric.Path( )方法里边跟了一串字符串参数，看着有点复杂，其实这并不难理解。“M”代表“移动”命令，这个“M 00” 代表把画笔移动到（0,0）点坐标。“L”代表“线”，“L 200 100 ”的意思是使用钢笔画一条线，从（0,0）坐标画到（200,100）坐标。 “z” 代表让图形闭合路径。就这样我们轻松的画出了一个三角形。画好三角形后，我们可以用set( )方法对三角形的位置、颜色、角度、透明度等属性进行设置。

虽然用路径画图形很简单，但图形比较复杂时，你会发现这很难控制，代码会变的臃肿而不可阅读，在实际工作中没有这样使用的。我们可以用svg来代替这种路径的形式。