AILabel标注工具指南(二):禁止图片外标注

发布于:2025-03-29 ⋅ 阅读:(32) ⋅ 点赞:(0)

背景:在前端开发过程中难免遇到针对图片的缩放平移;以及在图片上进行矢量数据、文本、标注的展示;如果你有上面的任何需求,恭喜你,找到组织了....
在此背景下,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,
                        });
                    }

感谢阅读,喜欢的话可以一键三连哦!


网站公告

今日签到

点亮在社区的每一天
去签到