宿主环境的兼容

鸿蒙系统提供了自定义组件的能力，@Component装饰器仅能装饰struct关键字声明的数据结构。struct被@Component装饰后具备组件化的能力，从API version 9开始，该装饰器支持在ArkTS卡片中使用。（https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V14/arkts-create-custom-components-V14#component）。

组件声明

• 为了保证鸿蒙环境中的 VChart 能力，鸿蒙环境中对原生的Canvas进行了封装，使其具备浏览器Canvas2D的接口

• harmony 环境的组件封装逻辑在packages/harmony_vchart/library/src/main/ets/ChartComponent.ets目录中，包含基于harmony环境封装的组件。

• 对鸿蒙的事件进行了二次封装，使其和浏览器的事件接口兼容

export class HTMLTouchEvent {
  type: string = '';
  touches: TouchItem[] = [];
  changedTouches: TouchItem[] = [];
  target: Object | null = null;

  constructor(harmonyTouchEvent: TouchEvent) {
    if (harmonyTouchEvent.type === TouchType.Down) {
      this.type = 'touchstart';
    } else if (harmonyTouchEvent.type === TouchType.Up || harmonyTouchEvent.type === TouchType.Cancel) {
      this.type = 'touchend';
    } else if (harmonyTouchEvent.type === TouchType.Move) {
      this.type = 'touchmove';
    }
    this.touches = harmonyTouchEvent.touches.map(t => new TouchItem(t));
    this.changedTouches = harmonyTouchEvent.touches.map(t => new TouchItem(t));
  }
}    

• 事件兼容逻辑在packages/harmony_vchart/library/src/main/ets/event.ets目录中。

• 由于鸿蒙环境中没有浏览器的RequestAnimationFrame接口，所以基于鸿蒙自己的动画API，实现了自定义的Ticker：HarmonyTickHandler。

• 动画Ticker逻辑在packages/harmony_vchart/library/src/main/ets/ticker.ets目录中。

组件注册

组件的注册包含属性以及必要的声明周期。

组件属性：

• spec：与 VChart 的 spec 配置相同

• initOption：与 VChart 的 initOption 配置相同；

组件方法：

• onChartInitCb: 提供了初始化完成的回调

• onChartReadyCb: 提供了图表完成创建准备绘制的回调

本文档由以下人员修正整理

玄魂