图表在低分辨率设备上正常，换到高像素密度屏幕后文字发虚，拖动窗口又出现重绘抖动，通常是逻辑尺寸、像素尺寸和缓存尺寸混在了一起。离屏缓存只有在尺寸和主题版本都匹配时才有价值。
方案面向HarmonyOS 6.1.1 Release SDK（API 24），系统Kit调用进入适配层，命令约束、状态归并和恢复策略进入可测试的业务层。范围包含状态与资源生命周期设计、失败恢复和验收合同，不包含业务内容生产、服务端协议改造以及特定厂商网页或媒体源的兼容承诺。
先区分vp尺寸与像素缓冲区
方案绘制带网格、折线和游标的训练曲线。网格与坐标标签变化频率低，进入离屏层；折线数据更新时重建数据层；游标随手势每帧变化，直接绘制。缓存键由widthPx、heightPx、density、theme和dataVersion组成，任何字段变化都创建新位图。
状态数量不是越多越好。每个状态必须回答三个问题：当前允许哪些命令、收到迟到事件怎样处理、页面退出后是否还可以更新UI。下面的状态对象携带operationId，新的操作开始后，旧操作回调会被拒绝。
export enum ChartRenderState { MEASURING = 'measuring', BUILDING_STATIC = 'building_static', BUILDING_DATA = 'building_data', READY = 'ready', RESIZING = 'resizing', DISPOSED = 'disposed' } export interface ChartRenderSnapshot { state: ChartRenderState; progress: number; message: string; operationId: number; updatedAt: number; } export type ChartRenderEvent = | { type: 'START'; operationId: number } | { type: 'PROGRESS'; operationId: number; progress: number } | { type: 'SUCCESS'; operationId: number } | { type: 'FAIL'; operationId: number; message: string }; export function acceptEvent( snapshot: ChartRenderSnapshot, event: ChartRenderEvent ): boolean { return event.type === 'START' || event.operationId === snapshot.operationId; }| 设计对象 | 保存内容 | 不应该保存的内容 |
|---|---|---|
| 页面状态 | 可展示阶段、进度、错误摘要 | 系统对象和页面Context |
| 适配器 | Kit实例、监听注册、资源句柄 | ArkUI组件引用 |
| 业务记录 | operationId、版本、恢复点 | 未脱敏的敏感原始数据 |
| 诊断信息 | 阶段耗时、错误码、能力检测 | Token、图片原始内容 |
静态背景和动态指示器分层
布局使用vp，真正创建像素缓冲区时乘以density并取整。绘制文本前保存上下文状态，缩放只应用一次。窗口连续变化时保留旧缓存用于过渡，但不把旧位图永久拉伸；尺寸稳定后异步生成新缓存并原子替换。
这套分层把系统事实和产品行为分开：Kit适配器负责获得事实，领域对象决定是否接受事件，页面只渲染快照。更换API版本或加入真机能力时，只需要替换适配器；状态归并和异常策略仍可在模拟器中重复验证。
缓存键包含哪些变量
下面是主题专属的接入或核心算法代码。示例刻意保留资源创建、前置条件和清理逻辑，因为高频故障往往出现在成功调用之外。
export interface RenderKey { widthPx: number; heightPx: number; density: number; theme: 'light' | 'dark'; dataVersion: number; } export function sameKey(left?: RenderKey, right?: RenderKey): boolean { if (!left || !right) return false; return left.widthPx === right.widthPx && left.heightPx === right.heightPx && left.density === right.density && left.theme === right.theme && left.dataVersion === right.dataVersion; } export class LayerCache { private key?: RenderKey; private rebuildCount: number = 0; shouldRebuild(next: RenderKey): boolean { const changed = !sameKey(this.key, next); if (changed) { this.key = { ...next }; this.rebuildCount++; } return changed; } diagnostics(): string { return 'cache rebuilds=' + this.rebuildCount; } }代码迁入业务工程时，应把错误码转换为稳定的领域错误，不让页面直接判断系统错误字符串。对于异步回调，还要在写入状态前比较operationId或资源版本；仅检查组件是否存在，无法阻止旧任务污染新页面。
窗口变化时如何避免拉伸旧图
| 故障输入 | 状态变化 | 恢复动作 |
|---|---|---|
| density变化 | 缓存键失效 | 按新像素尺寸重建 |
| 主题切换 | 静态层失效 | 颜色与文字重新绘制 |
| 窗口连续拖动 | 延迟昂贵重建 | 保留临时过渡层 |
| 页面退出 | 释放位图与上下文 | 缓存状态进入DISPOSED |
异常注入按钮用于稳定复现应用侧恢复路径。真实错误发生时，诊断记录同时保存错误码、权限结果、设备能力和用户可见状态；敏感原始数据不进入日志，截图只呈现与问题直接相关的结果。
直接绘制与离屏绘制基准
页面层不直接调用Kit，而是通过动作按钮驱动同一份状态模型。这样既能在系统能力可用时接真实适配器，也能在模拟器缺少硬件时验证错误页面、幂等逻辑和资源清理。
@Component struct ChartRenderPanel { @State stateText: string = 'MEASURING'; @State progress: number = 0; @State logs: string[] = []; private append(message: string): void { const time = new Date().toLocaleTimeString(); this.logs = [`${time} ${message}`, ...this.logs].slice(0, 8); } private startDemo(): void { this.stateText = 'BUILDING_STATIC'; this.progress = 20; this.append('开始：ArkGraphics 2D离屏绘制与高清缩放'); } private injectFailure(): void { this.stateText = 'DISPOSED'; this.append('已注入可恢复故障'); } build() { Column({ space: 12 }) { Text('ArkGraphics 2D离屏绘制与高清缩放').fontSize(24).fontWeight(FontWeight.Bold) Text(this.stateText).fontSize(18).fontColor('#2563EB') Progress({ value: this.progress, total: 100 }).width('100%') Row({ space: 12 }) { Button('开始实验').onClick(() => this.startDemo()) Button('注入故障').onClick(() => this.injectFailure()) } ForEach(this.logs, (item: string) => Text(item).fontSize(13)) }.padding(20).width('100%') } }验收在100%、150%、200%密度模拟值下生成同一图表，记录文字边缘和一像素网格；连续改变宽度时统计缓存重建次数；移动游标只更新动态层。验收材料包含图表、缓存键和每层耗时。
离屏缓存的收益取决于命中率和重建成本。页面记录静态层、数据层和动态层各自的绘制次数，只有静态层命中率稳定时才保留缓存。内存估算使用widthPx乘heightPx乘每像素字节数，窗口变大时可以提前拒绝过大的双缓冲。深浅色切换不能只给最终画布叠加滤镜，文字、分割线和背景色都应按主题重新绘制。测试截图以原始像素查看，缩略图无法判断一像素线条是否真正清晰。数据点数量超过阈值时先抽样再绘制，缓存不能掩盖路径本身过于复杂的问题。
验收记录至少包括SDK版本、模拟器系统版本、操作顺序、预期状态、实际状态和截图编号。快速点击、返回再进入、故障后重试和页面销毁是必测项；涉及资源的主题还要显示活动对象计数，涉及异步任务的主题要验证迟到结果不会改变当前页面。
从像素截图检查清晰度
这套方案的技术闭环由“输入约束—状态模型—Kit适配—异常恢复—可观察验收”组成。业务状态不持有系统对象，适配器不直接操作页面，异常路径有明确的恢复动作，后续SDK升级时可以分别回归每一层。
官方资料：ArkGraphics2D相关开发文档
