HarmonyOS 带有星球点的标签云如何实现

import { promptAction } from '@kit.ArkUI' 
 
@Entry 
@Component 
export struct Index { 
  radiusValue:number = 100 
  angleX:number = Math.PI / 300 
  angleY:number = Math.PI / 300 
  centerX:number = 170 
  centerY:number = 150 
  timerAn:number = 0 
  speedTimer:number = 0 
  @State positionX: number = 0 
  @State positionY: number = 0 
  viewStartX:number = Math.PI / 300 
  viewStartY:number = Math.PI / 300 
  @State dataItemArray: TagsInfo[] = [ 
    new TagsInfo("12","",12, 1, 10, 10, 1), 
    new TagsInfo("1","",12, 1, 10, 10, 1), 
    new TagsInfo("都","",12, 1, 10, 10, 1), 
    new TagsInfo("1","",12, 1, 10, 10, 1), 
    new TagsInfo("rew","",12, 1, 10, 10, 1), 
    new TagsInfo("17","",12, 1, 10, 10, 1), 
    new TagsInfo("17","",12, 1, 10, 10, 1), 
    new TagsInfo("17","",12, 1, 10, 10, 1), 
    new TagsInfo("17","",12, 1, 10, 10, 1), 
    new TagsInfo("17","",12, 1, 10, 10, 1), 
    new TagsInfo("17","",12, 1, 10, 10, 1), 
    new TagsInfo("17","",12, 1, 10, 10, 1), 
    new TagsInfo("17","",12, 1, 10, 10, 1), 
    new TagsInfo("17","",12, 1, 10, 10, 1), 
    new TagsInfo("17","",12, 1, 10, 10, 1), 
    new TagsInfo("17","",12, 1, 10, 10, 1), 
    new TagsInfo("17","",12, 1, 10, 10, 1), 
    new TagsInfo("12","",12, 1, 10, 10, 1), 
    new TagsInfo("13","",12, 1, 10, 10, 1), 
    new TagsInfo("14","",12, 1, 10, 10, 1), 
    new TagsInfo("15","",12, 1, 10, 10, 1), 
    new TagsInfo("16","",12, 1, 10, 10, 1), 
  ]; 
  //绕x轴转 
  rotateX(){ 
    let cos = Math.cos(this.angleX); 
    let sin = Math.sin(this.angleX); 
    this.dataItemArray.forEach((item) => { 
      let y = (item.y - this.centerY)* cos - item.z * sin + this.centerY 
      let z = item.z * cos + (item.y - this.centerY) * sin; 
      item.y = y; 
      item.z = z; 
      item.itemAlpha = (item.z + this.radiusValue) / (2 * this.radiusValue) 
    }) 
  } 
  //绕Y轴转 
  rotateY() { 
    let cos = Math.cos(this.angleY); 
    let sin = Math.sin(this.angleY); 
    this.dataItemArray.forEach((item)=> { 
      let x = (item.x - this.centerX) * cos - item.z * sin + this.centerX 
      let z = item.z * cos + (item.x - this.centerX) * sin; 
      item.x = x; 
      item.z = z; 
      item.itemAlpha = (item.z + this.radiusValue) / (2 * this.radiusValue) 
    }) 
  } 
  //随机颜色 
  getRandomColor ():string{ 
    return '#'+(Math.random()*0xffffff<<0).toString(16); 
  } 
  //手势改变旋转方向和速度 
  listener (event:GestureEvent) { 
    let x = -event.offsetX 
    let y = -event.offsetY 
    let changeX = x * 0.0001 > 0 ? Math.min(this.radiusValue * 0.002 , x * 0.001 ) : Math.max(-this.radiusValue * 0.002, x * 0.001); 
    let changeY = y * 0.0001 > 0 ? Math.min(this.radiusValue * 0.002 , y * 0.001) : Math.max(-this.radiusValue * 0.002, y * 0.001); 
    if (changeX != 0 && changeY != 0) { 
      this.angleY = changeX 
      this.angleX = changeY 
    } 
    this.rotateX(); 
    this.rotateY(); 
  } 
  timerAnAction(){ 
    if (this.timerAn) { 
      clearInterval(this.timerAn) 
    }else { 
      this.timerAn = setInterval(() => { 
        this.rotateX(); 
        this.rotateY(); 
      },17) 
    } 
  } 
  aboutToAppear(): void { 
    //改变 每个item的位置 
    for (let i = 0; i < this.dataItemArray.length; i++) { 
      let a:number, b:number; 
      let k = -1 + (2 * (i + 1) - 1) / this.dataItemArray.length; 
      a = Math.acos(k); 
      b = a * Math.sqrt(this.dataItemArray.length * Math.PI); 
      let item = this.dataItemArray[i] 
      item.x = this.radiusValue * Math.sin(a) * Math.cos(b) + this.centerX 
      item.y = this.radiusValue * Math.sin(a) * Math.sin(b) + this.centerY 
      item.z = this.radiusValue * Math.cos(a) 
      item.nameTitle = "测试"+i 
      item.fontSizeCount = 10 
      item.itemColor = this.getRandomColor() 
      item.itemAlpha = (item.z + this.radiusValue) / (2 * this.radiusValue) 
    } 
    //定时器旋转 
    this.timerAnAction() 
  } 
  build() { 
    Row() { 
      Column(){ 
        ForEach(this.dataItemArray, (item:TagsInfo) => { 
          tagView({tagsInfo:item}) 
        }, (item:TagsInfo) => JSON.stringify(item)) 
      } 
      .height(300) 
      .width("100%") 
      .onTouch((event?: TouchEvent)=>{ 
        if(event){ 
          if (event.type === TouchType.Down) { 
            clearInterval(this.timerAn) 
          } 
          if (event.type === TouchType.Up) { 
            this.timerAn = setInterval(() => { 
              this.rotateX(); 
              this.rotateY(); 
            },17) 
          } 
        } 
      }) 
      .gesture( 
        PanGesture().onActionStart((ev)=>{ 
          if (this.speedTimer) { 
            clearInterval(this.speedTimer) 
            this.speedTimer = null 
          } 
        }).onActionEnd((ev)=>{ 
          this.speedTimer = setInterval(()=>{ 
            if (Math.abs(this.angleX) * 0.7 > this.viewStartX || Math.abs(this.angleY) * 0.7 > this.viewStartY) { 
              this.angleX = this.angleX * 0.7 
              this.angleY = this.angleY * 0.7 
            }else { 
              clearInterval(this.speedTimer) 
              this.speedTimer = null 
            } 
          },500) 
          clearInterval(this.timerAn) 
          this.timerAn = setInterval(() => { 
            this.rotateX(); 
            this.rotateY(); 
          },17) 
 
        }).onActionUpdate((ev)=>{ 
          this.listener(ev) 
        }) 
      ) 
    } 
    .height(300) 
    .width("100%") 
  } 
} 
@Component 
export struct tagView { 
  @ObjectLink tagsInfo: TagsInfo 
  build() { 
    Text(this.tagsInfo.nameTitle) 
      .fontSize(this.tagsInfo.fontSizeCount) 
      .fontColor(this.tagsInfo.itemColor) 
      .position({ 
        x:this.tagsInfo.x, 
        y:this.tagsInfo.y, 
      }) 
      .opacity(this.tagsInfo.itemAlpha) 
      .onClick((ev)=>{ 
        promptAction.showToast({message:this.tagsInfo.nameTitle}) 
      }) 
  } 
} 
@Observed 
class TagsInfo { 
  x:number=0; 
  y:number=0; 
  z:number = 0; 
  nameTitle:string = "" 
  fontSizeCount:number = 0 
  itemAlpha:number = 0 
  itemColor:string = "" 
  constructor(title:string,color:string,fontSizeCount:number,alpha:number, x:number, y:number, z:number) { 
    this.nameTitle = title; 
    this.itemColor = color 
    this.fontSizeCount = fontSizeCount 
    this.itemAlpha = alpha 
    this.x = x; 
    this.y = y; 
    this.z = z; 
  } 
}
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.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.
107.
108.
109.
110.
111.
112.
113.
114.
115.
116.
117.
118.
119.
120.
121.
122.
123.
124.
125.
126.
127.
128.
129.
130.
131.
132.
133.
134.
135.
136.
137.
138.
139.
140.
141.
142.
143.
144.
145.
146.
147.
148.
149.
150.
151.
152.
153.
154.
155.
156.
157.
158.
159.
160.
161.
162.
163.
164.
165.
166.
167.
168.
169.
170.
171.
172.
173.
174.
175.
176.
177.
178.
179.
180.
181.
182.
183.
184.
185.
186.
187.
188.
189.
190.
191.
192.
193.
194.
195.
196.
197.
198.
199.