bd_group
/
gnss-tool-kit
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

实现decoration1的渲染

master
yezhichao@hwasmart.com 2021-12-06 05:48:23 +08:00
parent df362f036a
commit da2dea1199
2 changed files with 324 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/render/components/CenterCmp.vue
View File

@ -44,7 +44,6 @@
<script lang="ts" setup>
import Ring from './Ring.vue'
import Decoration1 from './Layout/Decoration1.vue'
import Decoration5 from './Layout/Decoration5.vue'
import { ref, computed } from 'vue'

381
src/render/components/Layout/Decoration1.vue
View File

@ -1,7 +1,6 @@
<template>
<div class="dv-decoration-1" ref="dom">
<svg :width="`${svgWH[0]}px`" :height="`${svgWH[1]}px`" :style="`transform:scale(${svgScale[0]},${svgScale[1]});`">
<svg :width="`${svgWH[0]}px`" :height="`${svgWH[1]}px`">
<template
v-for="(point, i) in points"
>
@ -85,67 +84,335 @@
</template>
<script lang="ts" setup>
import { ref, onMounted, reactive } from 'vue'
const dom = ref(null)
const width = ref(0)
const height = ref(0)
const svgWH = [200, 50]
const rowNum = 4
const rowPoints = 20
const defaultColor = ['#fff', '#0de7c2']
const pointSideLength = 2.5
const halfPointSideLength = pointSideLength / 2
let rects = reactive([])
let points = reactive([])
let svgScale = reactive([1, 1])
const calcPointsPosition = () => {
const [w, h] = svgWH
const horizontalGap = w / (rowPoints + 1)
const verticalGap = h / (rowNum + 1)
let pointArr = new Array(rowNum).fill(0).map((foo, i) =>
new Array(rowPoints).fill(0).map((foo, j) => [
horizontalGap * (j + 1), verticalGap * (i + 1)
])
)
points = pointArr.reduce((all, item) => [...all, ...item], [])
}
const calcRectsPosition = () => {
const rect1 = points[rowPoints * 2 - 1]
const rect2 = points[rowPoints * 2 - 3]
rects = [rect1, rect2]
}
const calcSVGData = () => {
calcPointsPosition()
calcRectsPosition()
calcScale()
}
const calcScale = () => {
const [w, h] = svgWH
svgScale = [width.value / w, height.value / h]
}
onMounted(() => {
width.value = dom.value.clientWidth
height.value = dom.value.clientHeight
calcSVGData()
})
const rects = [[190.47619047619048, 20], [171.42857142857142, 20]]
const points = [
[
9.523809523809524,
10
],
[
19.047619047619047,
10
],
[
28.57142857142857,
10
],
[
38.095238095238095,
10
],
[
47.61904761904762,
10
],
[
57.14285714285714,
10
],
[
66.66666666666667,
10
],
[
76.19047619047619,
10
],
[
85.71428571428571,
10
],
[
95.23809523809524,
10
],
[
104.76190476190476,
10
],
[
114.28571428571428,
10
],
[
123.80952380952381,
10
],
[
133.33333333333334,
10
],
[
142.85714285714286,
10
],
[
152.38095238095238,
10
],
[
161.9047619047619,
10
],
[
171.42857142857142,
10
],
[
180.95238095238096,
10
],
[
190.47619047619048,
10
],
[
9.523809523809524,
20
],
[
19.047619047619047,
20
],
[
28.57142857142857,
20
],
[
38.095238095238095,
20
],
[
47.61904761904762,
20
],
[
57.14285714285714,
20
],
[
66.66666666666667,
20
],
[
76.19047619047619,
20
],
[
85.71428571428571,
20
],
[
95.23809523809524,
20
],
[
104.76190476190476,
20
],
[
114.28571428571428,
20
],
[
123.80952380952381,
20
],
[
133.33333333333334,
20
],
[
142.85714285714286,
20
],
[
152.38095238095238,
20
],
[
161.9047619047619,
20
],
[
171.42857142857142,
20
],
[
180.95238095238096,
20
],
[
190.47619047619048,
20
],
[
9.523809523809524,
30
],
[
19.047619047619047,
30
],
[
28.57142857142857,
30
],
[
38.095238095238095,
30
],
[
47.61904761904762,
30
],
[
57.14285714285714,
30
],
[
66.66666666666667,
30
],
[
76.19047619047619,
30
],
[
85.71428571428571,
30
],
[
95.23809523809524,
30
],
[
104.76190476190476,
30
],
[
114.28571428571428,
30
],
[
123.80952380952381,
30
],
[
133.33333333333334,
30
],
[
142.85714285714286,
30
],
[
152.38095238095238,
30
],
[
161.9047619047619,
30
],
[
171.42857142857142,
30
],
[
180.95238095238096,
30
],
[
190.47619047619048,
30
],
[
9.523809523809524,
40
],
[
19.047619047619047,
40
],
[
28.57142857142857,
40
],
[
38.095238095238095,
40
],
[
47.61904761904762,
40
],
[
57.14285714285714,
40
],
[
66.66666666666667,
40
],
[
76.19047619047619,
40
],
[
85.71428571428571,
40
],
[
95.23809523809524,
40
],
[
104.76190476190476,
40
],
[
114.28571428571428,
40
],
[
123.80952380952381,
40
],
[
133.33333333333334,
40
],
[
142.85714285714286,
40
],
[
152.38095238095238,
40
],
[
161.9047619047619,
40
],
[
171.42857142857142,
40
],
[
180.95238095238096,
40
],
[
190.47619047619048,
40
]
]
</script>
<style>