背景:在前端开发过程中难免遇到针对图片的缩放平移;以及在图片上进行矢量数据、文本、标注的展示;如果你有上面的任何需求,恭喜你,找到组织了....
在此背景下,AILabel.js出生了。
源代码:https://github.com/dingyang9642/AILabel
API文档:http://ailabel.com.cn/public/ailabel/api/index.html
Demo文档:http://ailabel.com.cn/public/ailabel/demo/index.html
npm下载地址:https://www.npmjs.com/package/ailabel
标注案例展示:
http://zhb_nyx.gitee.io/ailabel_info
数据标注案例(新版本 5.0.16):
AILabel.zip_vueailabel使用-互联网文档类资源-CSDN下载
随着开源,作者的不断更新维护,AILabel的功能已经越来越全面,已经能够充分的满足标注的需求。
在我们标注任务中,往往需求都禁止图片外标注,但是AILabel 中并没有禁止此项目操作。
仔细观察标注坐标可以发现,标注的坐标点位于图片左侧和上方的都是负的,超出图片下方和右方的都大于高度和宽度。
所以当我们标注完成时间拿到坐标点可进行判断,从而禁止图片外标注。
代码奉上:
var isPOLYGON = true
if(shape.points){
shape.points.forEach(item => {
if(item.x < 0 || item.x > that.imgWidth || item.y < 0 || item.y > that.imgHeight ) {isPOLYGON = false}})
}else{
if(shape.x < 0 || shape.x > that.imgWidth || (shape.x + shape.width) > that.imgWidth || shape.y < 0 || shape.y > that.imgHeight || (shape.y + shape.height) > that.imgHeight){
isPOLYGON = false
}
}
if(isPOLYGON == false){
return this.$message.error({
message:'超出图片区域,不可标注',
showClose: true,
duration: 1000,
});
}
感谢阅读,喜欢的话可以一键三连哦!