HarmonyOS 鸿蒙Next 3DtagsCloud动态球案例

发布于 1周前 作者 songsunli 最后一次编辑是 5天前 来自 鸿蒙OS

HarmonyOS 鸿蒙Next 3DtagsCloud动态球案例

3DtagCloud

介绍

本示例实现了一个3DtagsCloud动态球。

3DtagCloud源码链接

实现效果

使用说明

  1. 进入应用会看到一个匀速旋转的3D球，拖拽可改变球转动的方向，最终3D球会保持匀速转动。
  2. 点击球体上的文字，在页面底部会出现对应的文字弹窗。

实现思路

3D球转动

实现3D球需要做一个球面，在球面上取均匀的点，把点坐标赋值给设定的球体文字，再根据Z轴大小改变文字的透明度，实现立体效果。

利用公式生成球面上点的坐标，赋值给球体元素，通过改变每一个元素的位置以及文字透明度，可得到立体球体。通过控制angleX和angleY的值来控制3D球旋转的方向，设置定时器控制球保持匀速旋转，再设置手势事件改变球的旋转方向和速度，则可得到一个3D动态球。核心代码如下，源码参考

3、工程目录：

entry/src/main/ets/ |—pages | |—index.ets 4、关键代码 （1）改变每个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); }

(2)旋转方向的判断

//绕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); }) }

(3)定时器旋转

//定时器旋转 this.timerAn = setInterval(() => { this.rotateX(); this.rotateY(); },17)

//手势改变旋转方向和速度 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; } }

5、操作指南： demo实现了一个3DtagsCloud动态球，可以拖拽改变动态球旋转方向。

更多关于HarmonyOS 鸿蒙Next 3DtagsCloud动态球案例的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

Harmonyos Next教程
1 回复

更多关于HarmonyOS 鸿蒙Next 3DtagsCloud动态球案例的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


HarmonyOS 鸿蒙Next 3DtagCloud 场景化代码实现主要依赖于鸿蒙系统提供的ArkUI框架，利用JS/TS进行开发。以下是一个简化版的示例代码，用于展示如何在鸿蒙应用中实现一个3D标签云效果。

@Entry
@Component
struct TagCloud {
  @State tags: string[] = ['Tag1', 'Tag2', 'Tag3', 'Tag4', 'Tag5'];

  build() {
    Column() {
      // 使用Canvas绘制3D标签云
      Canvas(this.context)
        .onReady(() => {
          const canvas = this.context.$element('canvas');
          const ctx = canvas.getContext('2d');
          // 绘制逻辑（简化，具体实现需根据需求设计3D效果）
          this.tags.forEach((tag, index) => {
            ctx.font = '20px Arial';
            ctx.fillStyle = 'rgba(0, 128, 0, ' + (index / this.tags.length) + ')';
            ctx.fillText(tag, Math.random() * 300, Math.random() * 300);
          });
        })
        .width('100%')
        .height('100%')
        .ref('canvas');
    }
  }
}

该代码通过Canvas组件绘制简单的标签云效果，具体3D效果需根据需求进一步设计算法和绘制逻辑。如果问题依旧没法解决请联系官网客服,官网地址是：https://www.itying.com/category-93-b0.html

回到顶部