0.3.0 • Published 3 months ago
vue-annotation v0.3.0
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 |
0.3.0
3 months ago
0.2.5
3 months ago
0.2.4
3 months ago
0.2.3
3 months ago
0.2.2
3 months ago
0.2.1
3 months ago
0.2.0
3 months ago
0.1.0
3 months ago
0.0.10
3 months ago
0.0.9
3 months ago
0.0.8
3 months ago
0.0.7
3 months ago
0.0.6
3 months ago
0.0.5
3 months ago
0.0.4
3 months ago
0.0.3
3 months ago
0.0.2
3 months ago
0.0.1
3 months ago
0.1.1
8 years ago