Canvas-Editor 控件字体大小异常问题分析与解决方案

问题背景

在Canvas-Editor项目中，用户报告了一个关于控件字体大小显示异常的问题。具体表现为：当控件设置了非默认字体大小后，在输入内容并清空时，placeholder文本的字体大小会恢复为默认值，而不是保持用户设置的大小。

问题现象

1. 初始状态：控件设置了特定的字体大小（非默认值），placeholder文本显示正常
2. 输入内容：在控件中输入文本时，文本大小与设置一致
3. 清空内容：当删除控件中的内容后，placeholder文本的字体大小变为默认值，而非原先设置的大小

技术分析

这个问题涉及到Canvas-Editor的核心绘制逻辑。通过分析源代码，发现问题出在src/editor/core/draw/Draw.ts文件中的getElementFont方法。

当前方法的字体大小获取逻辑存在缺陷，它没有全面考虑控件在不同状态下可能存在的字体大小属性。具体来说，当控件内容被清空时，系统未能正确获取并应用用户原先设置的字体大小。

解决方案

修改getElementFont方法中的字体大小获取逻辑，增加对控件实际大小的判断。具体修改如下：

const size = el.control?.size || el.actualSize || el.size || defaultSize

这个修改增加了对actualSize属性的检查，确保在控件内容被清空后，系统能够从更多可能的属性来源获取正确的字体大小值。

实现原理

1. 属性检查顺序优化：按照优先级依次检查可能的字体大小属性

   • 首先检查control.size（控件当前设置的大小）
   • 然后检查actualSize（控件实际应用的大小）
   • 接着检查size（基础大小设置）
   • 最后回退到defaultSize（默认大小）

2. 状态保持：通过这种多层次的属性检查，确保控件在各种状态下（初始化、输入中、清空后）都能保持一致的字体大小表现

影响范围

这个修改主要影响：

• 所有设置了非默认字体大小的控件
• 控件在内容清空后的placeholder显示
• 与字体大小相关的布局计算

验证方法

开发者可以通过以下步骤验证修复效果：

1. 创建一个设置了特定字体大小的控件
2. 输入并清空内容
3. 观察placeholder文本是否保持了设置的字体大小
4. 检查不同状态下的布局是否一致

总结

这个问题的修复不仅解决了placeholder字体大小异常的问题，更重要的是完善了Canvas-Editor中字体大小属性的获取逻辑，为后续的功能扩展打下了良好的基础。通过这种多层次的属性检查机制，系统能够更可靠地维护控件的视觉一致性，提升用户体验。