svg 标注绘画工具

安装

Using npm:

  npm install am-svg-marker

使用

<div style="width: 600px; height: 600px">
    <am-svg-marker
      v-model:current="current"
      v-model:marker="marker"
      :data="_data"
      :image="image"
      :loading="loading"
      @change="change"
      @loaded="loaded"
      :options="options"
    >
    </am-svg-marker>
  </div>
<script setup>
    import { ref, computed } from "vue";
    import amSvgMarker from "am-svg-marker";
    import 'am-svg-marker/dist/style.css'
    const image = ref(cigaretteDisplay1);
    const current = ref(null);
    const marker = ref(null);
    const loading = ref(false);
    const change =()=> {}
    const loaded = () => {}
    const options = {
            fill: "red",
            currentFill: "blue",
            stroke: "#008dff",
            currentStroke: "#f81d22",
            strokeWidth: "2",
            r: "5",
            strokeLinecap: "butt",
            strokeDasharray: "",
        }
    const data = ref([
        {
        type:'path',
        options:{
            fill: "rgba(0,0,0,0)",
            currentFill: "rgba(0,0,0,.5)",
            stroke: "#008dff",
            currentStroke: "#f81d22",
            strokeWidth: "2",
            r: "5",
            strokeLinecap: "butt",
            strokeDasharray: "",
        },
        points: [
        {
            x: 50,
            y: 664,
        },
        {
            x: 99,
            y: 665,
        },
        {
            x: 101,
            y: 747,
        },
        {
            x: 53,
            y: 746,
        },
        ],
    },
    ])
</script>

options

| 参数 | 说明 | 类型 | 默认值 | 可选值 | | ------------------------ | ---------------------------------- | ------------------------ | ------------- | -------------------- | | stroke | 描变颜色 | String | #008dff | | | currentStroke | 选中描边颜色 | String | #f81d22 | - | | fill | 填充颜色 | String | rgba(0,0,0,0) | - | | currentFill 选中填充颜色 | String | rgba(0,0,0,.5) | - | | strokeWidth | 描边大小 | String | - | - | | r | 直径,仅 circle 生效 | Number | 5 | - | | strokeLinecap | | Number | 4 | - | | strokeDasharray | 描边类型 | String | '' | 参考 svg 参数：'3,3' | | animates | 开启动画，使用true则使用默认配置 | Boolean/options-animates | 详见 Options | |

options-animates

| 参数 | 说明 | 类型 | 默认值 | 可选值 | | ----------------------------------------------------------------------------------------- | ----------------------------- | ----------------- | ----------------------- | -------------- | | attributeName | 父元素的需要被改变的属性名 | String | stroke | svg 支持的属性 | | values | 定义在动画过程中使用的值序列 | String | #008dff;#f81d22;#008dff | - | | dur | 标识了动画的简单持续时间 | String | 0.5s | - | | begin | 动画何时开始 | String | 0s | - | | repeatCount | 动画将发生的次数,值必须大于 0 | Number/indefinite | indefinite | - |

Methods

| 参数 | 说明 | 返回 | 默认值 | 可选值 | | ------ | ---------------- | ---------- | ------ | ------ | | change | 选中触发 | item,index | - | - | | loaded | 图片加载完成触发 | | - | - |