vue-annotator

Create annotation using SVG and HTML element.

Usage

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

<v-annotatorinertia:drawing="enableDrawingMode"
@select="openDialog"
:minSize="[50, 50]"
:grid="[5, 5]"
:multipleSelect="keyIsDown.Ctrl"
><imgdraggable="false" src="background.png" /><rectslot="annotation" stroke="green" x="300" y="150" width="170" height="100" /><polygonslot="annotation" stroke="purple" points="200,10 250,190 160,210" /><rectslot="drawing" stroke="red" /></v-annotator>

<style scoped>@import'~vue-annotator/style.css';
/* Your beloved style */
</style>

Enable --skipLibCheck if using typescript

Due to taye/interact.js#623

In tsconfig.json

{compilerOptions: {skipLibCheck: true}}

Now it should work fine

import{Vue,Component}from'vue-property-decorator'importVAnnotatorfrom'vue-annotator'
@Component({components: { VAnnotator }})exportclassMyCanvasextendsVue{/** 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:1010;
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