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

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

在此背景下,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 中并没有禁止此项目操作。

仔细观察标注坐标可以发现,标注的坐标点位于图片左侧和上方的都是负的,超出图片下方和右方的都大于高度和宽度。

所以当我们标注完成时间拿到坐标点可进行判断,从而禁止图片外标注。

代码奉上:

javascript 复制代码
 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,
                        });
                    }

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

相关推荐
是梦终空2 小时前
JAVA毕业设计227—基于SpringBoot+hadoop+spark+Vue的大数据房屋维修系统(源代码+数据库)
hadoop·spring boot·spark·vue·毕业设计·源代码·大数据房屋维修系统
九亿少女的梦@10 小时前
企业微信对接:回调地址带#时返回地址参数位置不对的问题
vue·企业微信·企微单点登录
百锦再14 小时前
搭建本地瓦片地图服务器的完整指南
运维·服务器·vue·openlayers·server·tile·bmap
sunbyte15 小时前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | EventKey Codes(键盘码)
前端·javascript·css·vue.js·vue
y东施效颦2 天前
uni-app页面发布测试环境出现连接服务器超时,点击屏幕重试解决方案
前端·javascript·vue.js·uni-app·vue
teeeeeeemo2 天前
Vue数据响应式原理解析
前端·javascript·vue.js·笔记·前端框架·vue
jstart千语2 天前
【vue3学习】vue3入门
前端·javascript·vue.js·typescript·vue
向明天乄2 天前
Maotu流程图编辑器:Vue3项目中的集成实战与自定义流程开发指南
javascript·编辑器·vue·流程图
@一枝梅3 天前
vue3 vite.config.js 引入bem.scss文件报错
javascript·rust·vue·scss
胡斌附体3 天前
表单设计器拖拽对象时添加属性
vue·vuedraggable·draggable·clone的使用·遇到的问题