Web 组态运用之用户数据 ARPU 分析图

ht.Default.setImage(‘pool‘, {
  dataBindings: [
    {
      attr: ‘offsetX‘,
      valueType: ‘Number‘,
      defaultValue: 0
    }
  ],
  width: 800,
  height: 200,
  clip: true,
  comps: [
    {
      type: ‘shape‘,
      background: ‘rgb(51, 153, 255)‘,
      rect: {
        func: function(data, view) {
          var x = data.a(‘offsetX‘) || 0;
          return [250 - x, 140, 300, 60];
        },
        value: [250, 140, 300, 60]
      },
      points: [250, 148, 290, 163, 333, 140, 421, 148, 510, 157, 550, 150, 550, 150, 550, 200, 250, 200],
      segments: [1, 4, 4, 2, 2]
    },
    ...
  ]
});

// 水池晃动动画
updatePoolDeep(pools) {
    // 设置每次位置水池晃动波纹偏移的值
    let offsetDlt = 2;
    // 设置水池晃动波纹动画对象
    let anim = {
        frames: Infinity,
        interval: 50,
        action: () => {
            pools.each((p) => {
                // 设置水池晃动波纹偏移方向
                let offsetFlag = p.a(‘offsetFlag‘) || 1;
                // 根据偏移方向取水池晃动波纹偏移值
                let offset = (p.a(‘offsetX‘) || 0) + offsetDlt * offsetFlag;
                // 对水池晃动波纹限定边界
                if (offset > 50) {
                    offset = 50;
                    offsetFlag = -1;
                } else if (offset < -50) {
                    offset = -50;
                    offsetFlag = 1;
                }
                // 对水池晃动波纹的偏移值和偏移方向进行数据绑定设置值
                p.a(‘offsetX‘, offset);
                p.a(‘offsetFlag‘, offsetFlag);
            });
        }
    };
    // 开启动画
    ht.Default.startAnim(anim);
} 

createNode() {
    let node;
    // 判断水池中是否有遗留，存在则设定节点为水池删除的最后一个节点
    if (this._pool.length) {
        node = this._pool.pop();
    }
    else {
        // 创建新的水滴节点
        node = new ht.Node();
        // 设置水滴图片
        node.setImage(WATER_IMG);
    }
    // 取出流动对应的第一条管道
    let firstPath = this.option.paths[0];
    // 设置随机的偏移量
    let offset = Math.floor(Math.random() * OFFSET_MAX * 2) - OFFSET_MAX;
    // 设置水滴的位置
    node.p(this.getStartPositon(firstPath.rect, firstPath.orientation, offset));
    // 设置水滴的朝向角度
    node.setRotation(this.getRotation(firstPath.orientation));
    // 设置水滴的数据绑定
    node.a({
        // 流动管道
        pathIndex: 0,
        // 动画步进
        step: Math.random() * 2 + 3,
        // 偏移量
        offset: offset
    });
    return node;
}

getStartPositon(rect, orientation, offset) {
    // 水滴流动的矩形区域 rect 的坐标位置
    let { x, y, width, height } = rect;
    // 判断水滴朝向位置，并相应地进行位置的偏移
    switch (orientation) {
        case TOP:
            return {
                x: x + width / 2 + offset,
                y: y + height
            };
        case RIGHT:
            return {
                x: x,
                y: y + height / 2 + offset
            };
        case BOTTOM:
            return {
                x: x + width / 2 + offset,
                y: y
            };
        case LEFT:
            return {
                x: x + width,
                y: y + height / 2 + offset
            };
    }
}

getRotation(orientation) {
    switch (orientation) {
        case TOP:
            return Math.PI;
        case RIGHT:
            return - Math.PI / 2;
        case BOTTOM:
            return 0;
        case LEFT:
            return Math.PI / 2;
    }
}