如何实现类似运动健康渐变色热量环效果

如何实现类似运动健康渐变色热量环效果

HarmonyOS
2024-01-30 23:21:14
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
liuhuzhou

1. 使用DataPanel实现环形图形,通过valueColors属性设置数据段颜色和trackShadow属性设置投影样式来模拟颜色渐变效果。

2. 使用Stack叠加多个圆环叠加。

3. 使用rotate属性进行图形旋转。

实现效果:

参考代码:

@Entry 
@Component 
struct LinearGradientDataPanelExample { 
  public values1: number[] = [80]; 
  color1: LinearGradient = new LinearGradient([{ color: "#F22424", offset: 0 }, { color: "#FF9933", offset: 1 }]); 
  color2: LinearGradient = new LinearGradient([{ color: "#FFAE0D", offset: 0 }, { color: "#FFD814", offset: 1 }]); 
  color3: LinearGradient = new LinearGradient([{ color: "#266EFF", offset: 0 }, { color: "#4DC3FF", offset: 1 }]); 
  @State bgColor: string = '#08182431'; 
  @State offsetX: number = 15; 
  @State offsetY: number = 15; 
  @State radius: number = 5; 
  @State colorArray1: Array<LinearGradient | ResourceColor> = [this.color1]; 
  @State colorArray2: Array<LinearGradient | ResourceColor> = [this.color2]; 
  @State colorArray3: Array<LinearGradient | ResourceColor> = [this.color3]; 
 
  build() { 
    Column({ space: 5 }) { 
      Stack() { 
        DataPanel({ values: this.values1, max: 100, type: DataPanelType.Circle }) 
          .width(400) 
          .height(400) 
          .valueColors(this.colorArray1) 
          .trackShadow({ 
            radius: this.radius, 
            colors: this.colorArray1, 
            offsetX: this.offsetX, 
            offsetY: this.offsetY 
          }) 
          .strokeWidth(40) 
          .trackBackgroundColor(this.bgColor) 
        DataPanel({ values: this.values1, max: 100, type: DataPanelType.Circle }) 
          .width(300) 
          .height(300) 
          .valueColors(this.colorArray2) 
          .trackShadow({ 
            radius: this.radius, 
            colors: this.colorArray2, 
            offsetX: this.offsetX, 
            offsetY: this.offsetY 
          }) 
          .strokeWidth(40) 
          .trackBackgroundColor(this.bgColor) 
        DataPanel({ values: this.values1, max: 100, type: DataPanelType.Circle }) 
          .width(200) 
          .height(200) 
          .valueColors(this.colorArray3) 
          .trackShadow({ 
            radius: this.radius, 
            colors: this.colorArray3, 
            offsetX: this.offsetX, 
            offsetY: this.offsetY 
          }) 
          .strokeWidth(40) 
          .trackBackgroundColor(this.bgColor) 
      } 
      .rotate({ 
        x: 0, 
        y: 0, 
        z: 1, 
        centerX: '50%', 
        centerY: '50%', 
        angle: 215 
      }) 
    }.width('100%').margin({ top: 5 }) 
  } 
}
分享
微博
QQ
微信
回复
2024-02-01 11:34:31
相关问题
组件如何实现渐变色
994浏览 • 1回复 待解决
Progress进度条如何实现渐变色
76浏览 • 1回复 待解决
如何实现顶部渐变遮罩效果
38浏览 • 1回复 待解决
如何实现类似keyframes的效果
886浏览 • 1回复 待解决
类似边框颜色线性渐变
283浏览 • 1回复 待解决
List组件如何设置两端的渐变效果
881浏览 • 1回复 待解决
如何实现渐变的圆角边框
1018浏览 • 1回复 待解决
如何实现组件边缘的颜色渐变
777浏览 • 1回复 待解决
canvas如何实现水印效果
427浏览 • 1回复 待解决
如何实现星级评分效果
92浏览 • 1回复 待解决
如何实现动画转场效果
417浏览 • 1回复 待解决
如何实现视频滤镜效果
832浏览 • 1回复 待解决