|
|
<template>
|
|
|
<div s>
|
|
|
<h1>绘制飞线</h1>
|
|
|
<div class="w-flex">
|
|
|
<w-flying-line
|
|
|
:width="width"
|
|
|
:height="height"
|
|
|
:lines="lines"
|
|
|
style="outline: solid #000 1px"
|
|
|
:style="{ width: `${width / 10}rem`, height: `${height / 10}rem` }"
|
|
|
/>
|
|
|
</div>
|
|
|
|
|
|
<div class="form">
|
|
|
<div class="w-flex">
|
|
|
画布宽度width：<el-input-number
|
|
|
v-model="width"
|
|
|
:min="100"
|
|
|
:max="1000"
|
|
|
:step="10"
|
|
|
/>
|
|
|
画布高度height：<el-input-number
|
|
|
v-model="height"
|
|
|
:min="100"
|
|
|
:max="1000"
|
|
|
:step="10"
|
|
|
/>
|
|
|
</div>
|
|
|
<div>
|
|
|
线条配置lines: path-线条路径, size-线条大小, lineColor-线条颜色,
|
|
|
flyingColor-飞线颜色，flyingLen-飞线长度, flying-是否绘制飞线,
|
|
|
dot-是否绘制光点, am-是否启动动画,time-动画周期时间
|
|
|
</div>
|
|
|
<div><el-input type="textarea" v-model="json" rows="10" /></div>
|
|
|
<div>
|
|
|
<el-button @click="lines = JSON.parse(json)">重绘线条</el-button>
|
|
|
</div>
|
|
|
<div>
|
|
|
默认线段配置:
|
|
|
<pre style="background-color: var(--w-bg-light); padding: 1rem; margin: .5rem 0; border: solid .1rem var(-w-bg-dark-5); font-size: .8rem; line-height: 1.8; border-radius: .5rem;">{{ JSON.stringify({
|
|
|
path: `M 10,10 C 200,10,10,200,290,290`,
|
|
|
size: 1,
|
|
|
lineColor: "var(--w-bg-dark)",
|
|
|
flyingColor: "var(--w-main)",
|
|
|
flyingLen: 20,
|
|
|
flying: true,
|
|
|
dot: true,
|
|
|
am: true,
|
|
|
time: "5s",
|
|
|
},null,' ') }}</pre>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
<script setup>
|
|
|
const width = ref(300);
|
|
|
const height = ref(300);
|
|
|
const lines = ref([
|
|
|
{
|
|
|
|
|
|
},
|
|
|
{
|
|
|
path: `M 200,10 Q 290,290,10,290 Z`,
|
|
|
size: 2,
|
|
|
lineColor: "#F002",
|
|
|
flyingColor: "#0F0",
|
|
|
flyingLen: 20,
|
|
|
flying: true,
|
|
|
dot: true,
|
|
|
am: true,
|
|
|
time: "30s",
|
|
|
},
|
|
|
{
|
|
|
path: `M 10,100 C 100,0,200,200,290,100`,
|
|
|
size: 3,
|
|
|
lineColor: "#00f1",
|
|
|
flyingColor: "#00f",
|
|
|
flyingLen: 20,
|
|
|
flying: true,
|
|
|
dot: false,
|
|
|
am: true,
|
|
|
time: "7s",
|
|
|
},
|
|
|
{
|
|
|
path: `M 10,200 C 100,100,200,300,290,200`,
|
|
|
size: 4,
|
|
|
lineColor: "#0a01",
|
|
|
flyingColor: "#0a0",
|
|
|
flyingLen: 20,
|
|
|
flying: false,
|
|
|
dot: true,
|
|
|
am: true,
|
|
|
time: "10s",
|
|
|
},
|
|
|
{
|
|
|
path: `M 5,5 L 295,5 L 295,295 5,295 Z`,
|
|
|
size: 1,
|
|
|
lineColor: "#0003",
|
|
|
am: false,
|
|
|
},
|
|
|
]);
|
|
|
|
|
|
const json = ref(JSON.stringify(lines.value, null, " "));
|
|
|
</script>
|
|
|
<style lang="scss" scoped>
|
|
|
.form {
|
|
|
display: grid;
|
|
|
padding: 1rem 5rem;
|
|
|
grid-template-columns: repeat(1, 1fr);
|
|
|
grid-gap: 1rem;
|
|
|
}
|
|
|
</style> |