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

Support

See CONTRIBUTING.md for contributing directly via:

• Pull Requests or
• Create Issues

License

MIT License