HarmonyOS 鸿蒙Next 如何能绘制附件中展示的贝塞尔曲线图 有示例可参考吗

HarmonyOS 鸿蒙Next 如何能绘制附件中展示的贝塞尔曲线图 有示例可参考吗

如何能绘制附件中展示的贝塞尔曲线图 有示例可参考吗

2 回复

绘制贝塞尔曲线的例子可以参考以下示例：

```

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(<span class="hljs-number">5</span>);
    pen.setColor({ alpha: <span class="hljs-number">255</span>, red: <span class="hljs-number">255</span>, green: <span class="hljs-number">0</span>, blue: <span class="hljs-number">0</span> });
    
    <span class="hljs-keyword">let</span> path = <span class="hljs-keyword">new</span> drawing.Path();
    path.moveTo(<span class="hljs-number">200</span>, <span class="hljs-number">200</span>);
    path.cubicTo(<span class="hljs-number">250</span>, <span class="hljs-number">200</span>, <span class="hljs-number">250</span>, <span class="hljs-number">100</span>, <span class="hljs-number">300</span>, <span class="hljs-number">100</span>);
    <span class="hljs-comment">// path.moveTo(400, 400);</span>
    path.cubicTo(<span class="hljs-number">350</span>, <span class="hljs-number">100</span>, <span class="hljs-number">350</span>, <span class="hljs-number">200</span>, <span class="hljs-number">400</span>, <span class="hljs-number">200</span>);
    <span class="hljs-comment">// path.close();</span>
    
    canvas.attachPen(pen);
    canvas.drawPath(path);
    canvas.detachPen();
}

}


class MyNodeController extends NodeController {
private rootNode: FrameNode | null = null;
private nodeArray: Array<TextRenderNode> = [];


addMyNode(item: TextRenderNode) {
    <span class="hljs-keyword">this</span>.nodeArray.push(item);
}

makeNode(uiContext: UIContext): FrameNode | <span class="hljs-literal">null</span> {
    <span class="hljs-keyword">this</span>.rootNode = <span class="hljs-keyword">new</span> FrameNode(uiContext);
    <span class="hljs-keyword">const</span> renderNode = <span class="hljs-keyword">this</span>.rootNode.getRenderNode();
    
    <span class="hljs-keyword">if</span> (renderNode === <span class="hljs-literal">null</span>) {
        <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.rootNode;
    }

    <span class="hljs-keyword">if</span> (renderNode) {
        renderNode.clearChildren();
        <span class="hljs-keyword">this</span>.nodeArray.forEach((item) =&gt; {
            renderNode.appendChild(item);
        });
    }
    
    <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.rootNode;
}

}


@Entry
@Component
struct Index {
@State newNode: TextRenderNode = new TextRenderNode();
@State nodeCV: MyNodeController = new MyNodeController();
tempY = 0;


build() {
    Column() {
        Column() {
            NodeContainer(<span class="hljs-keyword">this</span>.nodeCV)
                .width(<span class="hljs-string">'100%'</span>)
                .height(<span class="hljs-number">200</span>);

            Button(<span class="hljs-string">'Invalidate'</span>)
                .onClick(() =&gt; {
                    <span class="hljs-keyword">let</span> newNode = <span class="hljs-keyword">new</span> TextRenderNode();
                    newNode.frame = { x: <span class="hljs-number">0</span>, y: <span class="hljs-keyword">this</span>.tempY, width: <span class="hljs-number">200</span>, height: <span class="hljs-number">100</span> };
                    <span class="hljs-keyword">this</span>.nodeCV.addMyNode(newNode);
                    <span class="hljs-keyword">this</span>.nodeCV.rebuild();
                    <span class="hljs-keyword">this</span>.tempY += <span class="hljs-number">100</span>;
                });
        }
        .width(<span class="hljs-string">'100%'</span>)
        .height(<span class="hljs-string">'100%'</span>);
    }
    .height(<span class="hljs-string">'100%'</span>);
}

}

```

相关接口：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-graphics-drawing-V5#cubicto

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

您也可以参考以下示例：https://gitee.com/openharmony-sig/ohos-MPChart

更多关于HarmonyOS 鸿蒙Next 如何能绘制附件中展示的贝塞尔曲线图 有示例可参考吗的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中绘制贝塞尔曲线图，可以通过Canvas绘图API来实现。贝塞尔曲线是一种通过数学公式定义的曲线，常用于图形绘制中。以下是一个简要的实现步骤和示例代码框架：

  1. 准备绘图环境：

    • 创建一个自定义的View组件，重写其onDraw方法。
    • 在onDraw方法中获取Canvas对象。

  2. 设置贝塞尔曲线的控制点：

    • 确定起始点、终点以及控制点（对于二次贝塞尔曲线需要一个控制点，三次贝塞尔曲线需要两个控制点）。

  3. 绘制贝塞尔曲线：

    • 使用Canvas的drawPath方法，结合Path对象来绘制贝塞尔曲线。
    • Path对象提供了quadTo（二次贝塞尔曲线）和cubicTo（三次贝塞尔曲线）方法。

示例代码框架：

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    Path path = new Path();
    path.moveTo(startX, startY); // 起始点
    path.quadTo(controlX, controlY, endX, endY); // 二次贝塞尔曲线
    // 或者 path.cubicTo(controlX1, controlY1, controlX2, controlY2, endX, endY); // 三次贝塞尔曲线
    canvas.drawPath(path, paint);
}

请根据你的具体需求调整控制点和起始/终点坐标。如果问题依旧没法解决请联系官网客服，官网地址是：https://www.itying.com/category-93-b0.html

回到顶部