怎样使用 ailabel.js 实现图片标注的功能，画笔涂抹，填充内部颜色？

Question

使用ailabel.js实现图片标注的功能
现在有一个需求是使用画笔功能，画出形状以后，给内部填充颜色
ailabel.js这个里面没有画笔这个功能，有涂抹功能
涂抹功能可以获取到所有的点

var cvs = allFeatures[0].layer.canvas
var ctx = cvs.getContext('2d');
// arr1 是获取到的是所有的点
const points = arr1
ctx.beginPath();
console.log('111');
ctx.moveTo(...points.pop());
for (const point of points){
ctx.lineTo(...point);
}
console.log('222');
ctx.closePath();
console.log('333');
ctx.fillStyle = this.color;
ctx.fill()
console.log('444');

用这个方法实现不了填充颜色的功能
请问还有其它方法吗，或者是这个方法有什么问题

Answer 1

对ailabel不熟悉，但是既然你使用了框架，最好在框架内找办法

你用canvas的原生api是可以操作canvas的，但是你要确保ailabel返回的点位坐标和canvas绘制的坐标系是对等的，这还不是主要的，因为一般绘制canvas是需要清除画布不断绘制的，框架的话是把数据记录下来了，可以重新绘制，但是你手动添加的内容，框架并没有记住，它如果有重绘清除的步骤，你是画不上去的

而这个框架就是做标注功能的，怎么可能没有绘制多边形填充颜色的功能，看文档这里不就是你要的功能吗
AILabel.Feature.Polygon：http://ailabel.com.cn/public/...
IFeatureStyle：http://ailabel.com.cn/public/...

已参与了 SegmentFault 思否社区 10 周年「问答」打卡 ，欢迎正在阅读的你也加入。