HarmonyOS鸿蒙Next中Canvas绘制文字计算换行的时候会执行两次并重新排版

HarmonyOS鸿蒙Next中Canvas绘制文字计算换行的时候会执行两次并重新排版 【问题描述】：使用canvas绘制了一个分享海报，fillText在做拆分换行的时候如果一个中文字符刚好被拆成一半一半了会强行让绘制执行两次，相应的定位会被调整，然后我下面画的图给画了两张，用clear都清不掉

【问题现象】：

cke_1398.jpg

图1是造成的结果，我网上拉取的小程序二维码因为执行了两次所以被绘制了两次，并且因为前后执行的定位不同导致出现了错位覆盖现象

cke_2303.png

cke_2834.png

图2和图3是我在做标题换行时最后执行的字节节点换行，他打印了2次说明执行了2次，并且动态定位y也跟着改了

【版本信息】：

DevEco-Studio

cke_34992.png

测试机信息

cke_38700.jpg

【复现代码】：见附件，目前只有在该型号测试机上会出现该问题

cke_814.png

标题的循环换行执行代码

cke_7350.png

小程序加载图片代码

【尝试解决方案】：

1：使用clear强制清除第一次的绘图，未清除

2：将标题最后个文字“能”去掉以后，就不会执行两次，小程序二维码也正常了


更多关于HarmonyOS鸿蒙Next中Canvas绘制文字计算换行的时候会执行两次并重新排版的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

【分析结论】 Canvas绘制执行多次并且多次执行结果不一致导致出现问题。

【修改建议】

  1. 解决代码多次执行问题，需要开发者排查代码。
  2. 在onReady方法中首行增加this.context.reset()方法，reset方法会将CanvasRenderingContext2D重置为其默认状态，清除后台缓冲区、绘制状态栈、绘制路径和样式。

更多关于HarmonyOS鸿蒙Next中Canvas绘制文字计算换行的时候会执行两次并重新排版的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中，Canvas绘制文字计算换行时执行两次并重新排版的问题，可能涉及框架的文本布局机制。鸿蒙系统在处理Canvas文本渲染时，内部可能对文本测量和布局进行了多次计算，导致重复执行换行逻辑。这会影响性能，造成不必要的重绘。建议检查Canvas的绘制流程和文本属性设置，确保没有冗余操作。

这是一个典型的Canvas文本换行重排问题。当fillText遇到中文字符被截断时，系统会重新计算换行位置并重新绘制，导致后续绘制内容重复。

问题根源在于文本测量和换行逻辑。在计算文本宽度时，如果刚好在汉字中间截断，系统会强制将整个汉字移到下一行，这触发了重新布局和二次绘制。

建议优化文本换行算法：

  1. 在measureText之前进行预分割，避免在汉字中间断行
  2. 使用更精确的文本宽度计算，考虑字符边界
  3. 对换行逻辑添加防重入机制，确保只执行一次绘制

对于小程序二维码重复绘制，可以在绘制前检查是否已存在相同内容，或使用状态标记控制绘制次数。

这种问题在特定机型上出现可能与字体渲染引擎的实现差异有关，建议在不同设备上测试文本测量结果的一致性。

回到顶部