Install

Using npm:

npm install vue-mark-image --save

import VueMarkImage from 'vue-mark-image';
Vue.use(VueMarkImage);

Usage

<template>
  <VueMarkImage ref="vueMarkRef" :imgUrl="imgUrl" :markList="markList" @change="changeMark" @click="clickMark" />
</template>
<script>
  import { VueMarkImage } from 'VueMarkImage';
  export default {
    components: { VueMarkImage },
    data(){
      return {
        imgUrl: require('../assets/images/2d.jpg'),
        markList: [
          {
            id: 11,
            x: 320.9479064941406,
            y: 222.3333282470703,
            color: 'red'
          },
          {
            id: 22,
            x: 527.9479064941406,
            y: 292.3333282470703,
            color: 'red'
          }
        ]
      };
    },
    mounted(){},
    methods: {
      // 锚点改变
      changeMark(array){
        console.log('锚点改变', array);
      },
      // 设置锚点颜色
      changeMarkColor(){
        this.$refs.vueMarkRef.setMarkColor([11, 22], 'green');
      },
      // 删除锚点
      deleteMark(){
        this.$refs.vueMarkRef.deleteMark([11, 22]);
      },
      // 锚点点击
      clickMark(markId){
        console.log('点击了', markId);
      }
    }
  };
</script>

API AreaSelect

props

属性	说明	类型	默认值
width	默认宽度	String	850px
height	默认高度	String	850px
imgUrl	图片地址，网络地址或base64	String	-
defaultColor	默认颜色，十六进制颜色码	String	#666
markList	默认锚点数据	Array	例子[{id: 1,x: 320.9479064941406,y: 222.3333282470703,color: 'red'}]

events

事件名	说明	返回值	返回值参数说明
change	增加或删除锚点时触发	Function	返回值，数组，如[{id: 1,x: 320.9479064941406,y: 222.3333282470703,color: 'red'}]
click	锚点点击事件	Function	返回值，锚点id

Copyright (c) 2020-05-29, [email protected]