am-svg-marker v0.0.7

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

options-animates

Methods