vue-annotation

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