HarmonyOS 环形渐变如何实现

环形渐变如何实现？平滑的一个圆环，目前使用DataPanel实现的圆环结尾处有一个接口

示例代码：

@Entry
@Component
struct LinearGradientDataPanelExample0716 {
  public values1: number[] = [100]
  public color1: LinearGradient = new LinearGradient([{ color: "#F22424", offset: 0 }, { color: "#FF9933", offset: 0.25 },{color: "#266EFF", offset: 0.5},{color: "#4DC3FF", offset: 1},{ color: "#F22424", offset: 0 }])
  @State bgColor: string = '#08182431'
  @State colorArray1: Array<LinearGradient | ResourceColor> = [this.color1]

  build() {
    Column({ space: 5 }) {
      Stack(){
        DataPanel({ values: this.values1, max: 100, type: DataPanelType.Circle })
          .width(400)
          .height(400)
          .valueColors(this.colorArray1)
          .trackShadow({
            colors: this.colorArray1,
          })
          .strokeWidth(40)
          .trackBackgroundColor(this.bgColor)
      }
      .rotate({
        x: 0,
        y: 0,
        z: 1,
        centerX: '50%',
        centerY: '50%',
        angle: 215
      })
    }.width('100%').margin({ top: 5 })
  }
}
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.

HarmonyOS

fox280

2025-01-09 15:03:32

880浏览

回答 1

按赞同

按时间

aquaa

渐变圆环示例代码：

@Entry
@Component
struct myCanvasExample0722 {
  private settings: RenderingContextSettings = new RenderingContextSettings(true)
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)

  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Canvas(this.context)
        .width(100)
        .height(100)
        .onReady(() => {
          let grad = this.context.createLinearGradient(0,0,100,100)
          grad.addColorStop(0.0, '#ff0000')
          grad.addColorStop(0.25, '#ff0000')
          grad.addColorStop(1.0, '#00ff00')
          this.context.strokeStyle = grad
          this.context.beginPath()
          this.context.lineWidth = 10
          this.context.arc(50, 50, 40, 0, 6.28)
          this.context.stroke()
        })
    }
    .width('100%')
    .height('100%')
  }
}
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.

2025-01-09 17:58:14

如何写精华回答，获更多曝光？

发布

51CTO

51CTO博客

51CTO学堂

HarmonyOS 环形渐变如何实现

订阅鸿蒙技术特刊，精选内容抢先看