更新记录

1.0.1（2024-07-25） 下载此版本

只支持手机h5 touch事件

1.0.0（2024-07-24） 下载此版本

在图片上触摸进行矩形框标注, 可以多个矩形框，不到200行，自己可以按需求改

平台兼容性

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监听不到，先不修复了。