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>Enable --skipLibCheck if using typescript
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; }Support
See CONTRIBUTING.md for contributing directly via:
License
MIT License
