个性定制

前言

毕竟Vmarker是基于ui-picture-bd-marker的vue封装,当Vmarker不足以满足现有要求或难以基于Vmarker扩展,此时可以绕过Vmarker进行扩展,直接使用ui-picture-bd-marker扩展即可。

ui-picture-bd-marker 指南

ui-picture-bd-marker是一个原生js编写的图片标注控件,本控件依赖特定的dom树布局。目前版本由于某些原因,内部包含直接使用document对象,导致暂时还不支持虚拟DOM,还在改进中。不过,目前已有不太完美的解决方案可供使用,文章中会提到。

核心布局

核心结构如下,行内样式为建议样式:

<div class="g-image" style="width: 700px; height: 460px; position: relative; overflow: hidden;">
    <img src="http://ai.baidu.com/easydl/entity/raw?datasetId=10012&id=a41f2649f8650ce164814866897a0ed0ba5528cb3d4edccaf24f7e4271d5a072" style="display: block; position: absolute; user-select: none; width: 700px; height: 437.5px">
    <div id="annotate" style="user-select: none; position: absolute; width: 700px; height: 437.5px; cursor: crosshair; left: 0px; top: 11.25px;">
        <div class="draft" style="position: absolute;user-select: none;display: none;background-color: rgba(1,0,0,0.5);">
        </div>
    </div>
</div>
<style>
<script>
import "ui-picture-bd-marker/styles/bdmarker.scss";//样式
...
</script>

根容器(g-image),内部为图片区与标注区(annotate)层叠,标注区的作用是保存标注框与草稿(draft,拖拽矩形框时产生的即时草稿)。

API

ui-picture-bd-marker有以下可操作类或方法

import {
    ResizeAnnotation,
    BdAIMarker,
    UUID,//生成uuid的工具 const UUID = (len, radix) => {...}
    positionP2S,// const positionP2S = (position = { x: '0%', y: '0%', x1: '0%', y1: '0%' }, baseWith = 100, baseHeight = 100)=>{...}
    transformDataArray,//const transformDataArray = (data = [], baseWith = 0) => {... 遍历标注数据数组执行positionP2S,替换position对应数据 }
  } from 'ui-picture-bd-marker';

BdAIMarker为核心标注类,使用该实例可以进行画框和标注。

BdAIMarker实例

初始化Marker实例,new BdAIMarker(标注区元素,草稿元素,*ResizeAnnotation实例,*options),带*号为可选项。

基于以上的布局,marker实例化举例如下:

const marker = new BdAIMarker(
    document.querySelector('#annotate'),
    document.querySelector('.draft'),
    null,
    {
      options: {
        deviceType: 'both',//both | mouse | touch
        blurOtherDots: false,
        blurOtherDotsShowTags: false,
        editable: true,
        showTags: true,
        supportDelKey: false,
        tagLocation: defaultPositions.bottom,//1 2
        trashPositionStart: 0,
        boundReachPercent: 0.01,
        annotationClass: 'annotation',
      },
      onAnnoContextMenu: function(annoData, element, annoContext) {
        self.$emit("vmarker:onAnnoContextMenu", annoData, element, self.key);
      },
      onAnnoRemoved: function(annoData) {
        self.$emit("vmarker:onAnnoRemoved", self.key);
        return true;
      },
      onAnnoAdded: function(insertItem, element) {
        self.$emit("vmarker:onAnnoAdded", insertItem, self.key);
      },
      onAnnoChanged: function(newValue, oldValue) {
        self.$emit("vmarker:onAnnoChanged", newValue, oldValue, self.key);
      },
      onAnnoDataFullLoaded: function() {
        self.$emit("vmarker:onAnnoDataFullLoaded", self.key);
      },
      onAnnoSelected: function(value, element) {
        self.$emit("vmarker:onAnnoSelected", value, element, self.key);
      },
      onUpdated: function(data) {
        self.$emit("vmarker:onUpdated", data, this.key);
      }
    });

marker API

renderData(data=[],wh={ width: 240, height: 180 })

渲染数据,宽高为该数据产生时的宽高,如果position单位不是百分比时需要提供。

marker.renderData([
    {
      tag: "id04",
      tagName: "蜜蜂",
      position: {
        x: "41.026%",
        x1: "53.790000000000006%",
        y: "22.678%",
        y1: "40.496%"
      },
      uuid: "5559A20B25712D9D"
    }
  ]);
setTag(tag)

为当前选中的选框打标签。tag可以是String也可以是对象{tag:'',tagName:''}

dataSource()

获取数据

setConfigOptions(options)

更新options配置。options为构造marker时传入的options,可以增量更新

clearAll()

清空画布

版本

稳定版:ui-picture-bd-marker