search

DrSensor / vue-annotator

Vue Component for drawing annotation (rect, polygon, etc) using SVG element
http://vue-annotator.surge.sh
MIT License
79 stars 16 forks source link
annotations my-amusement svg vue vue-annotator vue-components

readme

vue-annotator CircleCI

npm npm donate

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="https://github.com/DrSensor/vue-annotator/raw/master/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* ```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 */ } ```

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