Vue Component for drawing annotation (box, etc)
npm install vue-annotatorCreate annotation using SVG and HTML element.
> For complete example see src/stories//.vue
``html
@select="openDialog"
:minSize="[50, 50]"
:grid="[5, 5]"
:multipleSelect="keyIsDown.Ctrl"
>

`
`css`
Enable
--skipLibCheck if using typescript
> Due to https://github.com/taye/interact.js/issues/623
In tsconfig.json
`js`
{
compilerOptions: {
skipLibCheck: true
}
}
Now it should work fine
`ts
import { Vue, Component } from 'vue-property-decorator'
import VAnnotator from 'vue-annotator'
@Component({ components: { VAnnotator } })
export class MyCanvas extends Vue {
/* Your beloved logic /
}
`
| 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 |
| Method name | Description | Accepted Element |
|---------- |-------- |---------- |
| default | background element of annotation | Any HTML element |annotation
| | annotation element (accept SVG element) | , , , , , |drawing
| | *draw element via mouse click&drag | , , |
| 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.$3
> Vue-Annotator use svg.select.js| Class name | Description | Notes
|---------- |-------- |--------- |
|
.svg_select_boundingRect | define style of rectangle in selected element | only applicable on , , |
| .svg_select_points | define style of edge circles in selected element |default style
`CSS
.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;
}
``