vue-annotator

vue-annotator

Create annotation using SVG and HTML element.

Usage

<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 */
}

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 sanpping. :grid="[w,h]" for setting width and height. :grid="w" for setting grid in square	Array[2] or Number	optional	null
minSize	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
multipleSelect	enable multiple select	Boolean	optional	false
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
unselect	emit when element is unselected (by clicking the background)	element: SVG.Element
drawfinish	emit when drawing element is finish	element: SVG.Element
drawcancel	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 with this predefined style that can be override

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

Support

See CONTRIBUTING.md for contributing directly via:

• Pull Requests or
• Create Issues

License

MIT License