HarmonyOS 鸿蒙Next中绘制圆滑折线
HarmonyOS 鸿蒙Next中绘制圆滑折线 当前需求如下，在固定宽度216，高度128的区域内绘制如下表格折线
-
在y轴方向，将此区域分成两部分，上部区域高度110，下部区域高度18，两部分区域交接位置，使用横线实线分割，实线size为1，颜色为#F1F1F1
-
在x轴方向，按照宽度54，将此固定区域均分4分，每一份之间通过纵向虚线间隔。被均分的4分区域底部，每份底部绘制居中的日期text（mock一下），文本fontSize为10，颜色#9F9F9F，
-
被均分的4分区域，每一份中都有一个坐标点，此坐标点x轴需要居于当前区域的中点位置，坐标点为填充圆形，直径为8，颜色为#7D8FFF。（具体Y坐标位置可以mock一下）
-
将坐标点依次连接，连接线为圆滑曲线，size为3，颜色为#DBE0FF
请问有类似的示例代码么
如果想实现折线图效果
查看一下 chart 组件的线形图是否符合您的需求。
参考链接：
https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-components-basic-chart-V5
Codelabs参考链接：
https://gitee.com/harmonyos/codelabs/tree/master/SwitchChart
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.cubicTo(350,100,350,200,400,200)
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](https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-canvasrenderingcontext2d-V5#setlinedash]
更多关于HarmonyOS 鸿蒙Next中绘制圆滑折线的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
在HarmonyOS（鸿蒙Next）中绘制圆滑折线，可以通过使用Canvas组件结合Path类实现。首先，创建Path对象，使用moveTo设置起点，然后通过quadTo或cubicTo方法添加曲线控制点，最后使用drawPath方法在Canvas上绘制。quadTo用于二次贝塞尔曲线，cubicTo用于三次贝塞尔曲线，根据需要选择合适的曲线类型以实现圆滑效果。
