HarmonyOS 绘制圆滑折线或绘制曲线

当前需求如下，具体样式如图

在固定宽度216，高度128的区域内绘制如下表格折线

1.在y轴方向，将此区域分成两部分，上部区域高度110，下部区域高度18，两部分区域交接位置，使用横线实线分割，实线size为1，颜色为#F1F1F1

2.在x轴方向，按照宽度54，将此固定区域均分4分，每一份之间通过纵向虚线间隔

3.被均分的4分区域底部，每份底部绘制居中的日期text（mock一下），文本fontSize为10，颜色#9F9F9F，

3.被均分的4分区域，每一份中都有一个坐标点，此坐标点x轴需要居于当前区域的中点位置，坐标点为填充圆形，直径为8，颜色为#7D8FFF。（具体Y坐标位置可以mock一下）

4.将坐标点依次连接，连接线为圆滑曲线，size为3，颜色为#DBE0FF

有示例代码么

HarmonyOS 绘制圆滑折线或绘制曲线 -鸿蒙开发者社区

HarmonyOS

FengTianYa

2025-01-09 14:18:48

602浏览

回答 1

按赞同

按时间

Excelsior_abit

drawing模块绘制贝塞尔曲线的例子可以参考以下案例：

import { RenderNode, DrawContext, FrameNode, NodeController } from "@ohos.arkui.node"
import drawing from "@ohos.graphics.drawing"

class TextRenderNode extends RenderNode {

  async draw(context: DrawContext) {
    const canvas = context.canvas;
    const pen = new drawing.Pen();
    pen.setStrokeWidth(5);
    pen.setColor({alpha: 255, red: 255, green: 0, blue: 0});
    let path = new drawing.Path();
    path.moveTo(200,200);
    path.cubicTo(250, 200, 250, 100, 300, 100);
    // path.moveTo(400,400);
    path.cubicTo(350,100,350,200,400,200)
    // path.close();
    canvas.attachPen(pen);
    canvas.drawPath(path);
    canvas.detachPen();
  }
}

class MyNodeController extends NodeController {
  private rootNode: FrameNode | null = null;
  private nodeArray: Array<TextRenderNode> = []
  addMyNode(item:TextRenderNode){
    this.nodeArray.push(item)
  }

  makeNode(uiContext: UIContext): FrameNode | null {
    this.rootNode = new FrameNode(uiContext);
    const renderNode = this.rootNode.getRenderNode();
    if (renderNode === null) {
      return this.rootNode;
    }
    if (renderNode) {
      renderNode.clearChildren()
      this.nodeArray.forEach((item) => {
        renderNode.appendChild(item)
      })
    }
    return this.rootNode;
  }
}

@Entry
@Component
struct Index {
  @State newNode:TextRenderNode = new TextRenderNode();
  @State nodeCV:MyNodeController = new MyNodeController()
  tempY = 0
  build() {
    Column() {
      Column() {
        NodeContainer(this.nodeCV)
          .width('100%')
          .height(200)
        Button('Invalidate')
          .onClick(() => {
            let newNode = new TextRenderNode()
            newNode.frame = { x: 0, y: this.tempY, width: 200, height: 100 }
            this.nodeCV.addMyNode(newNode)
            this.nodeCV.rebuild()
            this.tempY += 100
          })
      }
      .width('100%')
      .height('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.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.

画虚线参考：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-canvasrenderingcontext2d-V5#setlinedash

2025-01-09 16:39:05

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

发布

51CTO

51CTO博客

51CTO学堂

HarmonyOS 绘制圆滑折线或绘制曲线

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