1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
| <template>
| <g :transform="'translate(' + offset.join(',') + ')'">
| <!-- 圆角矩形 -->
| <path :d="createLinePath()" stroke="#fff" fill="none" stroke-width="2" />
| </g>
| </template>
|
| <script>
| export default {
| name: "",
| props: {
| offset: {
| type: Array,
| default() {
| return [0, 0];
| },
| },
| radius: {
| type: Number,
| default: 0,
| },
| points: {
| type: Array,
| required: true,
| default() {
| return [
| [0, 0],
| [10, 10],
| ];
| },
| },
| },
| computed: {},
| data() {
| return {};
| },
| methods: {
| // 获取线段上离终点指定距离的点的坐标
| getPointForLine(p0, p1, dis) {
| let dir = [p1[0] - p0[0], p1[1] - p0[1]];
| let dirlen = Math.sqrt(dir[0] * dir[0] + dir[1] * dir[1]);
| let dir_normal = [dir[0] / dirlen, dir[1] / dirlen];
| let dis_v = [dir_normal[0] * dis, dir_normal[1] * dis];
| return [p1[0] - dis_v[0], p1[1] - dis_v[1]];
| },
| createLinePath() {
| let { radius, points } = this;
| let path = "";
| let len = points.length;
| points.forEach((v, i) => {
| let isCentral = i > 0 && i < len - 1;
| let p_last = i > 0 ? points[i - 1] : [];
| let p_next = i < len - 1 ? points[i + 1] : [];
| if (0 == i) {
| path += `M${v[0]},${v[1]}`;
| } else if (i == len - 1) {
| path += ` L ${v[0]} ${v[1]}`;
| } else {
| if (radius > 0) {
| let c_last = this.getPointForLine(p_last, v, radius);
| let c_next = this.getPointForLine(p_next, v, radius);
| p_last;
| path += ` L ${c_last[0]} ${c_last[1]} C ${c_last[0]} ${c_last[1]}, ${v[0]} ${v[1]}, ${c_next[0]} ${c_next[1]}`;
| } else {
| path += ` L ${v[0]} ${v[1]}`;
| }
| }
| });
|
| return path;
| },
| },
|
| mounted() {},
| };
| </script>
|
| <style scoped>
| </style>
|
|
