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> <script lang="ts" setup>
import Ring from './Ring.vue' import Ring from './Ring.vue'
import Decoration1 from './Layout/Decoration1.vue' import Decoration1 from './Layout/Decoration1.vue'
import Decoration5 from './Layout/Decoration5.vue'
import { ref, computed } from 'vue' import { ref, computed } from 'vue'

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

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