问题由来
在绘制设备的形状的时候,大部分选择的是矩形元素,但是有时候需要有一个开口方向,表明他的位置情况。这时候需要使用自定义的绘制类型,这时候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获取真实宽高