问题由来
在绘制设备的形状的时候，大部分选择的是矩形元素，但是有时候需要有一个开口方向，表明他的位置情况。这时候需要使用自定义的绘制类型，这时候fabric.path可以解决这个问题。
fabric.Path
Fabric中的Path表示可以填充，描边和修改的形状的轮廓。path由一系列命令组成，基本上模仿了从一个点到另一个点的笔。借助“move”，“line”，“curve”或“arc”等命令，path可以形成令人难以置信的复杂形状。在Paths（路径组合）团队的帮助下，可能性更大。
Fabric中的路径与SVG 元素非常相似。它们使用相同的命令，可以从<path>元素创建，并将其序列化。稍后我们将更加仔细地观察序列化和SVG解析，但现在值得一提的是，您很可能很少手动创建Path实例：
var canvas = new fabric.Canvas('c');
var path = new fabric.Path('M 0 0 L 200 100 L 170 200 z');
path.set({ left: 120, top: 120 });
canvas.add(path);
更新fabric.path 宽高
从构造函数发现，Path的宽高其实是取决于路径绘制的字符串，并不是有属性 width和height控制。直接用代码修改 path.set('width',200) 并不能控制他的宽高。这时我们来研究了fabric.Group的相关方法。增删改差 + 查询
group.item(0)// 获得子对象group.getObjects()// 获得全部子对象数组group.size()// 组合中所有对象的数量group.contains()// 检查某个对象是否在组合group.add()// 新增group.addWithUpdate()// 新增并更新group.remove()// 删除group.removeWithUpdate()// 删除并更新
借助Group的相关机制，我们可以删除后，重新绘制Group的子元素，从而到达更新内部组件宽高的效果。
const orginWidth = value / (selectFabricObject.scaleX || 1) - 3;
const orginHeight = selectFabricObject.getScaledHeight() - 3;
const pathObject = selectFabricObject.item(0);
const x = pathObject.left || 0;
const y = pathObject.top || 0;
const angle = pathObject.angle || 0;
selectFabricObject.remove(...selectFabricObject.getObjects());
const path = new fabric.Path(
`M ${-x} ${-y} L ${-x + orginWidth} ${-y} L ${-x + orginWidth} ${-y + orginHeight} L ${-x} ${
-y + orginHeight
}`,
{
angle: angle,
borderColor: '000',
stroke: '#000',
fill: '#A7FFCF',
left: selectFabricObject.get('left'),
top: selectFabricObject.get('top'),
originX: 'left',
originY: 'top',
strokeWidth: 3,
},
);
const name = new fabric.Textbox('打包台', {
fontSize: 11,
lockRotation: true,
width: orginWidth,
fontWeight: '200',
stroke: '#2b354a',
strokeWidth: 1,
left: (selectFabricObject.get('left') || 0) + orginWidth / 2,
top: (selectFabricObject.get('top') || 0) + orginHeight / 2,
originX: 'center',
originY: 'center',
textAlign: 'center',
splitByGrapheme: true,
});
selectFabricObject.addWithUpdate(path);
selectFabricObject.addWithUpdate(name);
这里我们控制控制了Group的 {lockScalingX: true ,lockScalingY: true,} 禁止他手动拖动修改scaleX scaleY 的值。只能通过右侧操作宽高，需要知道这两个的区别，请访问之前的文章 fabricjs获取真实宽高
