HarmonyOS 鸿蒙Next中Polyline组件如何绘制渐变区域？

HarmonyOS 鸿蒙Next中Polyline组件如何绘制渐变区域？

需求是：画出来折线后，折线以下区域，添加一个渐变的效果，请问如何实现？

请问如下三个组件可以实现吗？Polyline组件、Polygon组件、Path组件

使用canvas绘制的话会有问题，循环出来的八个或多个canvas组件，会出现跳行的现象，不清楚原因！所以想用Polyline组件、Polygon组件、Path组件试试，有什么办法吗？

@Entry
@Component
struct TestPage {
  build() {
    Column() {
      Polyline()
        .width(120)
        .height(120)
        .fillOpacity(0)
        .stroke("#F7282E")
        .strokeWidth(1)
        .points([[0, 120 - 100], [10, 120 - 70], [20, 120 - 70], [30, 120 - 30], [40, 120 - 30], [50, 120 - 50], [60, 120 - 50], [70, 120 - 90], [80, 120 - 90], [90, 120 - 100]])
        .strokeLineJoin(LineJoinStyle.Round)
        .strokeLineCap(LineCapStyle.Round)
    }.width('100%').height('100%')
  }
}

示例图如下，蓝色阴影渐变区域


更多关于HarmonyOS 鸿蒙Next中Polyline组件如何绘制渐变区域？的实战教程也可以访问 https://www.itying.com/category-93-b0.html

6 回复

Polyline组件的fill属性仅支持纯色填充，无法直接实现渐变效果。但可通过组合其他组件实现。

使用Polygon绘制闭合区域（折线+底部基线），结合linearGradient实现渐变：

@Entry
@Component
struct GradientArea {
  build() {
    Column() {
      // 折线部分保持不变
      Polyline().points(/* ... */)

      // 渐变区域绘制
      Polygon()
      .points([[0, 120], [10, 70], [20, 70], [30, 30], [40, 30],
              [50, 50], [60, 50], [70, 90], [80, 90], [90, 100],
              [90, 120], [0, 120]]) // 添加底部两点形成闭合
      .fill(new LinearGradient({
        angle: 180,
        colors: [[0x007AFF, 0], [0x007AFF, 0.5], [0xFFFFFF, 1]]
      }))
      .fillOpacity(0.3)
    }
  }
}

通过闭合点数组形成梯形区域，透明度调节实现渐变过渡。

复杂形状，用Path自定义路径：

Path()
.commands('M0 100 L10 70 ... L90 100 L90 120 L0 120 Z') // SVG路径语法
.fill(new RadialGradient({
  center: [50, 60],
  radius: 80,
  colors: [[0x007AFF, 0], [0xFFFFFF, 1]]
}))

通过LinearGradient参数配置颜色渐变：

.fill(new LinearGradient({
  angle: 270, // 从上向下渐变
  colors: [
    [0x007AFF, 0.2],  // 起始颜色及位置
    [0x007AFF, 0.5],
    [0xFFFFFF, 0.8]   // 结束颜色
  ]
}))

调整angle参数可改变渐变方向，colors数组控制过渡阶段。

更多关于HarmonyOS 鸿蒙Next中Polyline组件如何绘制渐变区域？的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


看一下这个例子

https://echarts.apache.org/examples/zh/editor.html?c=area-simple

cke_2413.png

为啥不用arkweb + 图表库 例如 echart实现呢，会更加容易

没在echart中找到实现方案，不知道是不是我引入的不对，

在鸿蒙Next中，使用Polyline组件绘制渐变区域需配合Canvas的渐变对象。先创建LinearGradient或RadialGradient对象定义渐变颜色和范围，然后通过Polyline的stroke属性应用渐变。示例代码片段：

let gradient = new LinearGradient()
gradient.addColorStop(0.0, '#FF0000')
gradient.addColorStop(1.0, '#0000FF')

Polyline({
  width: '100%',
  height: '100%',
  stroke: {
    gradient: gradient,
    width: 5
  },
  points: [[10,10], [100,100], [200,50]]
})

关键点：必须通过stroke.gradient属性绑定渐变对象，直接设置color无效。

在HarmonyOS Next中，可以使用Polygon组件结合LinearGradient来实现折线下的渐变区域效果。Polyline本身不支持填充，而Polygon可以定义闭合区域并填充渐变。

以下是实现代码示例：

@Entry
@Component
struct TestPage {
  build() {
    Column() {
      Stack() {
        // 渐变填充区域
        Polygon()
          .width(120)
          .height(120)
          .fill(new LinearGradient({
            angle: 270,
            colors: [['#00A0FF', 0.2], ['#00A0FF', 0]] 
          }))
          .points([
            [0, 120],  // 左下角
            [0, 120 - 100], [10, 120 - 70], [20, 120 - 70],
            [30, 120 - 30], [40, 120 - 30], [50, 120 - 50],
            [60, 120 - 50], [70, 120 - 90], [80, 120 - 90],
            [90, 120 - 100], [90, 120]  // 右下角
          ])

        // 折线
        Polyline()
          .width(120)
          .height(120)
          .stroke("#F7282E")
          .strokeWidth(1)
          .points([[0, 120 - 100], [10, 120 - 70], [20, 120 - 70], 
                  [30, 120 - 30], [40, 120 - 30], [50, 120 - 50],
                  [60, 120 - 50], [70, 120 - 90], [80, 120 - 90], 
                  [90, 120 - 100]])
          .strokeLineJoin(LineJoinStyle.Round)
          .strokeLineCap(LineCapStyle.Round)
      }
    }.width('100%').height('100%')
  }
}

关键点：

  1. 使用Stack将Polygon和Polyline叠加
  2. Polygon的点集需要闭合，从折线起点→折线各点→折线终点→右下角→左下角
  3. LinearGradient设置垂直方向(angle:270)的渐变效果
  4. 调整渐变颜色的透明度实现渐变效果

这种方法比使用多个Canvas更高效，也不会出现跳行问题。

回到顶部