Leafer UI 自定义图形绘制重影问题分析与解决方案

问题现象

在 Leafer UI 框架中开发自定义图形组件时，开发者可能会遇到一个典型问题：当图形参数（如边框宽度）发生变化时，在画布缩放比例较大的情况下会出现明显的拖拽重影现象。具体表现为：

1. 初始状态下图形显示和交互正常
2. 修改边框参数后出现多次绘制的残影
3. 画布缩放比例越大，问题越明显
4. 原生图形（如 Rect）不会出现此问题

问题根源

这个问题的本质原因是自定义图形的边界计算（包围盒）不正确。在 Leafer UI 中，每个图形元素都有一个包围盒（bounding box），用于确定元素的绘制区域和交互区域。当开发者自定义绘制逻辑时，如果没有正确处理包围盒的计算，就会导致以下问题：

1. 绘制区域不准确：框架无法正确判断需要重绘的区域
2. 交互检测失效：命中测试（hit test）可能无法正常工作
3. 渲染性能下降：可能导致不必要的重绘操作

解决方案

方法一：重写 __updateBoxBounds 方法

对于完全自定义的图形，最彻底的解决方案是重写 __updateBoxBounds 方法，精确计算图形的边界：

__updateBoxBounds() {
    const { width, height, strokeWidth } = this.__
    // 考虑描边宽度对边界的影响
    const halfStroke = strokeWidth / 2
    this.__.boxBounds.set(-halfStroke, -halfStroke, width + strokeWidth, height + strokeWidth)
}

这种方法需要开发者对图形的几何边界有精确的理解，确保计算出的包围盒能够完全包含图形的所有可见部分。

方法二：使用框架默认的 strokeWidth 处理

对于大多数情况，更简单的解决方案是让框架自动处理描边宽度对边界的影响：

// 在绘制方法中统一使用 this.__.strokeWidth
__draw(canvas: ILeaferCanvas) {
    const { context } = canvas
    const { width, height, strokeWidth } = this.__
    
    // 绘制时使用统一的 strokeWidth
    context.lineWidth = strokeWidth
    // ...其余绘制代码
}

这种方法利用了 Leafer UI 内置的边界计算逻辑，框架会自动根据 strokeWidth 调整元素的包围盒。

最佳实践建议

1. 边界计算一致性：确保绘制逻辑和边界计算逻辑匹配，特别是描边宽度要考虑在内
2. 性能优化：对于复杂图形，精确计算包围盒可以减少不必要的重绘
3. 交互测试：实现自定义图形后，应在不同缩放比例下测试交互行为
4. 继承现有图形：如果可能，考虑继承现有图形类并扩展，而不是完全从头实现

总结

在 Leafer UI 中开发自定义图形组件时，正确处理图形边界是确保渲染正确性和交互准确性的关键。通过重写 __updateBoxBounds 方法或统一使用框架的描边宽度处理，可以有效解决绘制重影问题。理解框架的渲染机制和边界计算原理，有助于开发者创建更稳定、高效的自定义图形组件。