HarmonyOS Next 有遮盖的折线图

最近在学习鸿蒙App开发,刚好学到画折线图这部分,也有一些第三方库,功能确实很强大,基本都满足一般的需要。本着学习的态度,弄清楚原理,就手动做了demo,以备记录。好了,废话少说,直接上代码。

`@Entry @Component export struct TestChartPage { private settings: RenderingContextSettings = new RenderingContextSettings(true) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) private readonly POINT_COLOR = '#ff0000' private readonly POINT_RADIUS = 4 @State points:number[][]= [] aboutToAppear(): void {

ini 复制代码
let randomArray:number[][]= []
const count = 7
const maxWidth = 350
const offset = maxWidth / (count - 1)

for (let i = 0;i < count;i++){
  let x = offset * i
  if (x == 0) {
    x = 10
  }
  let y = Math.floor(Math.random() * 300) + 1;
  randomArray.push([x,y])
}

this.points = randomArray

}

// 绘制数据点 点的位置不是很准确,有待优化。 private drawDataPoints() { this.points.forEach(point => { this.context.beginPath() this.context.arc(point[0], point[1], this.POINT_RADIUS, 0, Math.PI * 2) this.context.fillStyle = this.POINT_COLOR this.context.fill() }) }

build() { Column() { Canvas(this.context) .backgroundColor(Color.Orange) .width('100%') .height(400) .onReady(() => { this.context.strokeStyle = '#0078ff'; this.context.lineWidth = 2;

ini 复制代码
      this.context.beginPath();
      this.context.moveTo(this.points[0][0], this.points[0][1]);

      for (let i = 0; i < this.points.length - 1; i++) {
        const p0 = this.points[i];
        const p1 = this.points[i + 1];
        const t0 = this.points[i];
        const t1 = this.points[i + 1];
        const k = 1/3;

        const x1 = p0[0] + t0[0] * k;
        const y1 = p0[1] + t0[1] * k;

        const x2 = p1[0] - t1[0] * k;
        const y2 = p1[1] - t1[1] * k;

        this.context.bezierCurveTo(x1, y1,x2, y2, p1[0], p1[1]);
      }

      this.context.lineTo(this.points[this.points.length - 1][0],400)
      this.context.lineTo(this.points[0][0],400)
      this.context.lineTo(this.points[0][0],this.points[0][1])

      //  创建渐变填充
      const gradient = this.context.createLinearGradient(0, 0, 0, 400);
      gradient.addColorStop(0, 'rgba(135, 206, 235, 0.5)'); // 半透明蓝色
      gradient.addColorStop(1, 'rgba(135, 206, 235, 1)'); // 完全透明
      this.context.closePath();
      this.context.fillStyle = gradient;
      this.context.fill();
      
      this.context.beginPath();
      this.context.moveTo(this.points[0][0], this.points[0][1]);
      for (let i = 0; i < this.points.length - 1; i++) {
        const p0 = this.points[i];
        const p1 = this.points[i + 1];
        const t0 = this.points[i];
        const t1 = this.points[i + 1];
        const k = 1/3;

        const x1 = p0[0] + t0[0] * k;
        const y1 = p0[1] + t0[1] * k;

        const x2 = p1[0] - t1[0] * k;
        const y2 = p1[1] - t1[1] * k;

        this.context.bezierCurveTo(x1, y1,x2, y2, p1[0], p1[1]);
      }
      this.context.stroke();
      // 绘制数据点
      this.drawDataPoints()
    })
}
.height('100%')
.width('100%')

} } `

最终的效果图如下:

相关推荐
花生侠14 分钟前
记录:前端项目使用pnpm+husky(v9)+commitlint,提交代码格式化校验
前端
一涯21 分钟前
Cursor操作面板改为垂直
前端
我要让全世界知道我很低调28 分钟前
记一次 Vite 下的白屏优化
前端·css
1undefined230 分钟前
element中的Table改造成虚拟列表,并封装成hooks
前端·javascript·vue.js
蓝倾1 小时前
淘宝批量获取商品SKU实战案例
前端·后端·api
comelong1 小时前
Docker容器启动postgres端口映射失败问题
前端
花海如潮淹1 小时前
硬件产品研发管理工具实战指南
前端·python
用户3802258598241 小时前
vue3源码解析:依赖收集
前端·vue.js
WaiterL1 小时前
一文读懂 MCP 与 Agent
前端·人工智能·cursor