HarmonyOS 鸿蒙Next @ohos.graphics.drawing绘制文字怎么换行

发布于 1周前 作者 bupafengyu 来自 鸿蒙OS

HarmonyOS 鸿蒙Next @ohos.graphics.drawing绘制文字怎么换行 如题！

尝试了在文字中嵌入’\n’，但是只是增加了空格并没有换行效果

drawing.TextBlob.makeFromString(
    item.text.split('').join(item.area === Align.VERTICAL ? '\n' : ''),
    font,
    drawing.TextEncoding.TEXT_ENCODING_UTF8
)
Harmonyos Next教程
4 回复 
async draw(context: DrawContext) {
  const canvas = context.canvas
  const brush = new drawing.Brush()
  brush.setColor({
    alpha: 255,
    red: 255,
    green: 0,
    blue: 0
  })
  const font = new drawing.Font()
  font.setSize(100)
  const textBlob = drawing.TextBlob.makeFromString("Hello", font, drawing.TextEncoding.TEXT_ENCODING_UTF8)
  const textBlob1 = drawing.TextBlob.makeFromString("World", font, drawing.TextEncoding.TEXT_ENCODING_UTF8)

  canvas.attachBrush(brush)
  canvas.drawTextBlob(textBlob, 0, 100)
  canvas.drawTextBlob(textBlob1, 100, 200)
}

把文字拆成两行进行绘制

更多关于HarmonyOS 鸿蒙Next @ohos.graphics.drawing绘制文字怎么换行的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


想过这种方案，不过后续行的行高不确定是怎么计算的，y值可能会存在误差，

后续的行高根据 font.setSize(100) 设定的大小动态分配，

在HarmonyOS鸿蒙系统中，使用@ohos.graphics.drawing包进行文字绘制时，换行处理通常不是直接由绘制API提供的，而是需要开发者在字符串处理阶段自行实现。以下是实现换行的基本思路：

  1. 确定换行逻辑：根据绘制区域的宽度和文字的字体大小，计算出每行可以容纳的最大字符数。

  2. 分割字符串：根据计算出的最大字符数，将原始字符串分割成多行。这通常涉及遍历字符串，并在达到字符限制时插入换行符\n。

  3. 绘制多行文字：在绘制时，根据分割后的字符串数组，逐行绘制每一部分。在绘制每行时，确保使用相同的起始x坐标，但y坐标要根据前一行的高度累加。

示例代码（伪代码，非实际可执行）：

// 假设text是需要绘制的字符串，maxWidth是绘制区域的宽度，fontSize是字体大小
std::vector<std::string> lines = splitTextIntoLines(text, maxWidth, fontSize);
for (const auto& line : lines) {
    canvas->drawText(line, x, y, paint);
    y += lineHeight; // lineHeight需要根据字体大小计算或设定
}

请注意，上述示例为伪代码，实际实现中需要考虑字体度量、换行逻辑的具体实现等。如果问题依旧没法解决请联系官网客服,官网地址是 https://www.itying.com/category-93-b0.html

回到顶部