am-svg-marker

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	图片加载完成触发		-	-