问题

之所以进行自定义 Shape 方案的优化，主要是为了解决以下问题：

  1. 降低用户的使用门槛，尽可能得减少新概念。
    目前自定义 Shape 的接口定义如下，相比于 3.x 新增了 update()、destroy() 和 setState() 接口，这次优化在考虑是否有必要释放？
  1. /** 注册具体 shape 需要实现的接口 */
  2. export interface RegisterShape {
  3.   /** 计算绘制需要的关键点，在注册具体的 shape 时由开发者自己定义 */
  4.   readonly getPoints?: (pointInfo: ShapePoint) => Point[];
  5.   /** 获取 shape 对应的缩略图样式配置，在注册具体的 shape 时由开发者自己定义 */
  6.   readonly getMarker?: (color: string, isInPolar: boolean) => ShapeMarkerCfg;
  7.   /** 绘制 */
  8.   readonly draw: (cfg: ShapeDrawCFG, container: Element) => IShape | IGroup;
  9.   /** 更新 shape */
  10.   readonly update: (cfg: ShapeDrawCFG, container: Element) => void;
  11.   /** 销毁 */
  12.   readonly destroy?: (cfg: ShapeDrawCFG, container: Element) => void;
  13.   /** 响应状态量 */
  14.   readonly setState?: (stateName: string, stateStatus: boolean, element: Element) => void;
  15. }
  1. 动画，主要是整体动画的支持。
    因为 Geometry 层添加了数据更新机制，同时在自定义 Shape 层面开放了 draw()
    、 update()、 destroy() 接口，所以目前的设计是将所有的动画在自定义 Shape 中实现。但是这个方案就导致了以下问题：
    1. 不支持整体动画，只支持 Shape 自己的动画，这样就导致了 3.x 很多图表丑陋的出场动画无力优化…
    2. 由于在 draw()/update() 阶段，用户可以对 shape 进行动画操作，而有的动画操作会改变 shape 原本的图形属性，这样就导致了用户获取到的 shape 原始属性不正确，这个对交互的影响较大。
  2. 如何保存 shape 的原始样式，用于状态量管理（setState()）

方案

虚拟 Group

  • 自定义 Shape 只开放 draw() 和 getMarker() 方法，降低开发编码和用户使用问题
  • element 上进行个体动画，Geometry 层开放入场的整体动画
  • element 上的更新以及 setState() 方法使用虚拟 Group 的方式创建 Shape，解决 originStyle 的问题。