更新记录
1.0.1(2024-07-25)
下载此版本
只支持手机h5 touch事件
1.0.0(2024-07-24)
下载此版本
在图片上触摸进行矩形框标注, 可以多个矩形框,不到200行,自己可以按需求改
平台兼容性
HbuilderX/cli最低兼容版本 |
3.7.6 |
uni-app
app-vue |
app-nvue |
app-android |
app-ios |
app-harmony |
? |
? |
? |
? |
? |
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
? |
? |
? |
? |
? |
? |
? |
? |
? |
微信小程序 |
支付宝小程序 |
百度小程序 |
字节小程序 |
QQ小程序 |
钉钉小程序 |
快手小程序 |
飞书小程序 |
京东小程序 |
? |
? |
? |
? |
? |
? |
? |
? |
? |
uni-app x
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
? |
? |
? |
? |
? |
? |
? |
? |
? |
ikun-marker
在图片上触摸进行矩形框标注, 可以多个矩形框(区域1,区域2,区域3等)
用法
<ikun-marker
ref="ikunMarker"
:image-path="imageUrl"
:markers.sync="markers"
/>
说明
- image-path: 图片路径,给image设置src
- markers: 数组,包含区域1,区域2...等的坐标信息
markers: [{
height: 19.8, // 0-100, 矩形高度 19.8%
width: 18.8, // 0-100 矩形宽度18.8%
x: 21.6, // 0-100, 矩形左上角点:left:21.6%
y: 39.4 //0-100 矩形左上角点:top:39.48%
}]
- 清空所有矩形框:调用this.$refs.ikunMarker.clearBox()
其它
image使用widthFix方式,宽度为父组件的100%,高度自适应。
@touchleave监听不到,先不修复了。