Vue-annotator NPM

vue-annotator

Create annotation using SVG and HTML element.

Usage

For complete example see src/stories/*/*.vue

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

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