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