图表在低分辨率设备上正常，换到高像素密度屏幕后文字发虚，拖动窗口又出现重绘抖动，通常是逻辑尺寸、像素尺寸和缓存尺寸混在了一起。离屏缓存只有在尺寸和主题版本都匹配时才有价值。

方案面向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;
}

静态背景和动态指示器分层

布局使用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或资源版本；仅检查组件是否存在，无法阻止旧任务污染新页面。

窗口变化时如何避免拉伸旧图

异常注入按钮用于稳定复现应用侧恢复路径。真实错误发生时，诊断记录同时保存错误码、权限结果、设备能力和用户可见状态；敏感原始数据不进入日志，截图只呈现与问题直接相关的结果。

直接绘制与离屏绘制基准

页面层不直接调用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相关开发文档