snow-falls/src/script/plugin/EleBorder.ts

The snow falls and the wind blows

import Borders, { BordersOptions } from "../physics/Borders";

/**
 * 将元素的边界映射到Borders类中，开启积雪效果
 */
export default class EleBorder extends Borders {
  className: string;
  coefficient?: (ele: HTMLElement) => number;
  /**
   * 元素顶部产生积雪效果
   * @param className 开启积雪效果的css类名
   * @param coefficient 传入一个函数，返回当前元素顶部最大的积雪数量，调整这个数值以节约性能
   */
  constructor(className: string, coefficient?: (ele: HTMLElement) => number) {
    const eles = Array.from(
      document.querySelectorAll(`.${className}`)
    ) as HTMLElement[];
    const polygons = eles.map((ele) => {
      const options = {
        points: [
          [ele.offsetLeft, ele.offsetTop],
          [ele.offsetLeft + ele.offsetWidth, ele.offsetTop],
        ],
        snowMaxNum: ele.offsetWidth,
      };

      if (coefficient) options.snowMaxNum = coefficient(ele);
      return options;
    });

    super({
      polygons,
    } as BordersOptions);
    this.className = className;
    this.coefficient = coefficient;
  }
}