Create annotation using SVG and HTML element

vue-annotator

Vue Component for drawing annotation (rect, polygon, etc) using SVG element.

<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';

/* Your beloved style */
</style>
Enable --skipLibCheck if using typescript

Due to https://github.com/taye/interact.js/issues/623

In tsconfig.json

{
  compilerOptions: {
    skipLibCheck: true
  }
}

Now it should work fine

import { Vue, Component } from 'vue-property-decorator'
import VAnnotator from 'vue-annotator'

@Component({ components: { VAnnotator } })
export class MyCanvas extends Vue {
  /** Your beloved logic */
}

API References

Props

* : must be set if no background

Parameters Description Type Must Specify Default value
width width of drawing canvas Number *optional width of background
height width of drawing canvas Number *optional height of background
grid set grid for snapping. :grid="[w,h]" for setting width and height. :grid="w" for setting grid in square Array[2] or Number optional null
min-size set minimum size of annotation. :minSize="[w,h]" for set minimum width and height of annotation size. :grid="w" for set minimum width and height of annotation size equal to w Array[2] or Number optional false
drawing switch to drawing mode Boolean optional false
inertia enable inertia moment animation when interacting Boolean optional false
multiple-select enable multiple select Boolean optional false
mouse-select restrict select only for specific mouse button String of left|right|middle optional
delete.sync delete selected element when set to true Boolean optional

Slots

* : will error when more than 1 element to be provided

Method name Description Accepted Element
default background element of annotation Any HTML element
annotation annotation element (accept SVG element) <rect>, <ellipse>, <circle>, <polygon>, <path>, <foreignObject>
drawing *draw element via mouse click&drag <rect>, <ellipse>, <circle>

Events

Event name Description Parameters
select emit when element is click/select element: SVG.Element
select-left emit when element is clicked with left mouse button element: SVG.Element
select-middle emit when element is clicked with middle mouse button element: SVG.Element
select-right emit when element is clicked with right mouse button element: SVG.Element
unselect emit when element is unselected (by clicking the background) element: SVG.Element
move emit when element is moved element: SVG.Element
move-end emit after the element is moved element: SVG.Element
resize emit when element is resized element: SVG.Element
resize-end emit after the element is resized element: SVG.Element
draw emit when drawing an element element: SVG.Element
draw-end emit when drawing element is finish element: SVG.Element
draw-cancel emit when drawing element is canceled (via right click)
update:delete emit when shape was successfully deleted

Tips: use element.node.isSameNode(this.$refs.myAnnotation) for identifying the element.

Style CSS

Vue-Annotator use svg.select.js

Class name Description Notes
.svg_select_boundingRect define style of rectangle in selected element only applicable on <rect>, <circle>, <ellipse>
.svg_select_points define style of edge circles in selected element

default style

.svg_select_points {
  stroke-width: 1;
  fill: black;
  stroke-dasharray: 10 10;
  stroke: black;
  stroke-opacity: 0.8;
  pointer-events: none; /* This ons is needed if you want to deselect or drag the shape*/
}

.svg_select_boundingRect {
  display: none;
}

GitHub