Simple Vue Annotation for Vue3 Composition api

Example

Features

• Draggable and Resizeable
• Customize Box style
• Get Box Info (position, width, height)

Install

npm i vue-annotation

How To Use

<script setup lang="ts">
import { watch } from "vue";
import { useAnnotation } from "vue-annotation";
const { svgRef, globalBox, deleteBox } = useAnnotation({ boxStrokeWidth: 2 });

// if want to see box infos, write this code
watch(globalBox, () => {
  console.log(globalBox);
});
</script>

<template>
  <div>
    <button @click="deleteBox">Box Delete Button</button>
    <svg
      ref="svgRef"
      :width="200"
      :height="200"
    >
      <image href="/src/assets/images/chiwa.jpg" />
    </svg>
  </div>
</template>

• This library uses D3.js, so it draws boxes inside an SVG tag within a template tag. To do this, it is necessary to declare the svgRef from the useAnnotation composable as the ref of the SVG tag.

useAnnotation Props

| Props | Type | Default | | ----------------- | ------ | ------- | | boxStrokeWidth | number | 1 | | boxStrokeColor | string | blue | | boxFillColor | string | #FFCCCC | | boxFillOpacity | number | 0.4 | | circleRadius | number | 6 | | circleFillColor | string | red | | circleStrokeColor | string | black |