vue drawshape component adapt to skutil/datamodel used by the author privately.

Install

yarn add vue-skutil-drawshape

Usage

// global usage
import DrawShape from 'vue-skutil-drawshape'
Vue.use(DrawShape)

// single .vue file usage
<script>
import { InputRect, InputPolygon } from 'vue-skutil-drawshape'
export default {
  components: {
    InputRect,
    InputPolygon
  },
  ...
}
</script>

Example

<template>
  <input-rect :imgurl="imgurl" :rect.sync="rect" />
  <input-polygon :imgurl="imgurl" :polygon.sync="polygon" />
</template>

<script>
import { InputRect, InputPolygon } from 'vue-skutil-drawshape'

export default {
  components: {
    InputRect,
    InputPolygon
  },
  data() {
    return {
      imgurl: "https://xxxxxx.jpg"
      rect: undefined,
      polygon: undefined
    }
  }
}
</script>