更新记录

1.0.1（2024-08-09） 下载此版本

支持手机h5 touch事件,同时也支持PC上用鼠标进行标注 在图片上触摸进行矩形框标注, 可以多个矩形框，自己可以按需求改

平台兼容性

rect-marker

在图片上触摸进行矩形框标注, 可以多个矩形框（区域1，区域2，区域3等） 同时支持手机H5和PC版

用法

        <rect-marker
            ref="rectMarker"
            :image-path="imageUrl"
            :boxes="markers"
            :markers.sync="markers"
        />

说明

• image-path: 图片路径，给image设置src
• boxes：控件初始化时，向控件传输已设定的区域1，区域2...等的坐标信息（数据一般为之前导出的markers，结构与markers相同）
• 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.rectMarker.clearBox()

其它

image使用widthFix方式，宽度为父组件的100%，高度自适应。 @touchleave监听不到，先不修复了。