HarmonyOS 鸿蒙Next中如何在曲线路径上绘制文本

HarmonyOS 鸿蒙Next中如何在曲线路径上绘制文本 我要实现一个自定义绘制文字的需求，文字不是在直线上，而是在二阶或三阶贝塞尔曲线或者圆形上面。类似Android上面的drawTextOnPath

3 回复

【背景知识】 paintOnPath可以在在画布上沿路径绘制文本。 cubicTo可以添加一条从路径最后点位置（若路径没有内容则默认为(0,0)到目标点位置的三阶贝塞尔圆滑曲线。

【解决方案】

  1. 使用绘制cubicTo绘制三阶贝塞尔圆滑曲线；
  2. 再使用paintOnPath将文本绘制在曲线上。
import { RenderNode, FrameNode, NodeController } from '@ohos.arkui.node';
import { drawing } from '@kit.ArkGraphics2D'
import { text } from '@kit.ArkGraphics2D'

let path = new drawing.Path();
let paragraph: text.Paragraph | null = null;

function setParm() {
  path.cubicTo(800, 100, 600, 2000, 0, 0);

  let myTextStyle: text.TextStyle = {
    color: {
      alpha: 255,
      red: 0,
      green: 0,
      blue: 255
    },
    fontSize: 38,
    fontWeight: 4,
    letterSpacing: 0,
  };
  let myParagraphStyle: text.ParagraphStyle = {
    textStyle: myTextStyle,
    align: 0,
  };
  let fontCollection = new text.FontCollection();
  let paragraphGraphBuilder = new text.ParagraphBuilder(myParagraphStyle, fontCollection);
  paragraphGraphBuilder.addText('弧形文本测试弧形文本测试弧形文本测试弧形文本测试弧形文本测试弧形文本测试弧形文本测试弧形文本测试');
  paragraph = paragraphGraphBuilder.build();
  paragraph.layoutSync(20000)
}

class DrawingRenderNode extends RenderNode {
  draw(context: DrawContext) {
    setParm()
    if (paragraph) {
      paragraph.paintOnPath(context.canvas, path, 0, 0);
    }
  }
}

const newNode = new DrawingRenderNode();
newNode.size = { width: 800, height: 800 }

class MyNodeController extends NodeController {
  private rootNode: FrameNode | null = null;
  makeNode(uiContext: UIContext): FrameNode | null {
    this.rootNode = new FrameNode(uiContext);
    const rootRenderNode = this.rootNode.getRenderNode();
    if (rootRenderNode !== null) {
      rootRenderNode.appendChild(newNode);
    }
    return this.rootNode;
  }
}

@Entry
@Component
struct Index {
  private myNodeController: MyNodeController = new MyNodeController();
  build() {
    Column() {
      Column() {
        NodeContainer(this.myNodeController)
      }
    }
  }
}

更多关于HarmonyOS 鸿蒙Next中如何在曲线路径上绘制文本的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS Next中，使用TextPath组件可在曲线路径上绘制文本。通过shape属性设置路径形状（如TextPathShape.ARC），offset控制文本起始位置，startOffset调整文本偏移量。路径数据由Path对象定义，支持贝塞尔曲线等复杂路径。文本沿路径自动适配，无需手动计算坐标。

在HarmonyOS Next中，可以通过Canvas组件的drawTextOnPath方法实现在曲线路径上绘制文本。具体步骤如下：

  1. 创建路径：使用Path类创建所需的曲线路径，如二阶贝塞尔曲线、三阶贝塞尔曲线或圆形路径。
  2. 设置文本样式：通过Paint对象设置文本的字体、大小、颜色等属性。
  3. 绘制文本：调用Canvas的drawTextOnPath方法，将文本沿指定路径绘制。

示例代码片段如下：

import { Path, Paint, Canvas } from '@kit.ArkGraphics2D';

// 创建路径
let path = new Path();
path.moveTo(100, 100);
path.quadTo(200, 50, 300, 100); // 二阶贝塞尔曲线

// 设置文本样式
let paint = new Paint();
paint.setTextSize(30);
paint.setColor(Color.Black);

// 绘制文本
canvas.drawTextOnPath("Hello HarmonyOS", path, 0, 0, paint);

对于圆形路径，可使用Path的addCircle方法。注意调整文本偏移量以确保位置合适。此方法支持复杂路径上的文本绘制，满足自定义需求。

回到顶部