使用Vue.js和SVG绘制图形– vue-annotator

使用Vue.js和SVG绘制图形– vue-annotator
插件名称 vue-annotator
发布时间 2020年9月1日
插件作者 DrSensor

Vue组件,用于使用SVG和HTML元素绘制注释(矩形,多边形等)。

用法

<v-annotator inertia
  :drawing="enableDrawingMode"
  @select="openDialog"
  :minSize="[50, 50]"
  :grid="[5, 5]"
  :multipleSelect="keyIsDown.Ctrl"
>

    <img draggable="false" src="background.png" />

    <rect slot="annotation" stroke="green" x="300" y="150" width="170" height="100" />
    <polygon slot="annotation" stroke="purple" points="200,10 250,190 160,210" />

    <rect slot="drawing" stroke="red" />

</v-annotator>
<style scoped>
@import '~vue-annotator/style.css';

/* 你钟爱的风格 */
</style>