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

2天前

浏览

回答 1

待解决

回答 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%')
  }
}

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

2天前

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

发布

51CTO

51CTO博客

51CTO学堂

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

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