yoone-snow/js/snow-canvas.js

(function(){
  // 初始化函数 用于启动雪花效果
  function init(){
    const canvas = document.getElementById('effectiveAppsSnow');
    // 条件判断 如果未找到画布元素则不执行
    if (!canvas) return;
    const context = canvas.getContext('2d');
    let viewportWidth = window.innerWidth;
    let viewportHeight = window.innerHeight;
    const devicePixelRatio = window.devicePixelRatio || 1;

    // 读取选中的形状集合 简化为仅使用复选框集合
    const selectedShapes = (window.YooneSnowSettings && Array.isArray(window.YooneSnowSettings.selectedShapes) && window.YooneSnowSettings.selectedShapes.length > 0)
      ? window.YooneSnowSettings.selectedShapes
      : ['dot','flake'];
    // 读取媒体形状列表 用于将媒体图片作为形状参与渲染
    const mediaItems = (window.YooneSnowSettings && Array.isArray(window.YooneSnowSettings.mediaItems))
      ? window.YooneSnowSettings.mediaItems
      : [];

    function resizeCanvas(){
      viewportWidth = window.innerWidth;
      viewportHeight = window.innerHeight;
      const displayWidth = viewportWidth;
      const displayHeight = viewportHeight;
      canvas.style.width = displayWidth + 'px';
      canvas.style.height = displayHeight + 'px';
      canvas.width = Math.floor(displayWidth * devicePixelRatio);
      canvas.height = Math.floor(displayHeight * devicePixelRatio);
      context.setTransform(devicePixelRatio, 0, 0, devicePixelRatio, 0, 0);
    }

    resizeCanvas();

    const snowflakeCount = Math.floor(Math.min(400, Math.max(120, (viewportWidth * viewportHeight) / 12000)));
    const snowflakes = [];
    for (let i = 0; i < snowflakeCount; i++){
      // 为每个雪花确定形状类型 从选中集合与媒体列表的合并池中随机选择
      const poolSize = selectedShapes.length + mediaItems.length;
      const randomIndex = Math.floor(Math.random() * Math.max(1, poolSize));
      let chosenType = 'dot';
      let chosenImageUrl = null;
      if (randomIndex < selectedShapes.length) {
        // 条件判断 使用普通形状类型
        chosenType = selectedShapes[randomIndex];
      } else if (mediaItems.length > 0) {
        // 条件判断 使用媒体图片作为形状 并记录其 URL
        const mediaIndex = randomIndex - selectedShapes.length;
        chosenType = 'media_image';
        chosenImageUrl = mediaItems[mediaIndex % mediaItems.length];
      }
      snowflakes.push({
        positionX: Math.random() * viewportWidth,
        positionY: Math.random() * viewportHeight,
        radius: Math.random() * 2 + 1,
        driftSpeed: Math.random() * 0.6 + 0.4,
        swingAmplitude: Math.random() * 0.8 + 0.2,
        shapeType: chosenType,
        imageUrl: chosenImageUrl
      });
    }

    function updateSnowflakes(){
      for (let j = 0; j < snowflakes.length; j++){
        const flake = snowflakes[j];
        flake.positionY += flake.driftSpeed * 2 + flake.radius * 0.25;
        flake.positionX += Math.sin(flake.positionY * 0.01) * flake.swingAmplitude;
        if (flake.positionY > viewportHeight + 5){
          flake.positionY = -5;
          flake.positionX = Math.random() * viewportWidth;
          flake.radius = Math.random() * 2 + 1;
          flake.driftSpeed = Math.random() * 0.6 + 0.4;
          flake.swingAmplitude = Math.random() * 0.8 + 0.2;
        }
      }
    }

    // 使用全局渲染注册表 根据形状类型选择渲染函数
    
    function drawSnowflakes(){
      context.clearRect(0, 0, viewportWidth, viewportHeight);
      
      for (let k = 0; k < snowflakes.length; k++){
        const flake = snowflakes[k];
        // 条件判断 如果是媒体图片类型则使用通用图像渲染
        if (flake.shapeType === 'media_image' && flake.imageUrl){
          const record = window.YooneSnowGetOrLoadImage ? window.YooneSnowGetOrLoadImage(flake.imageUrl) : { img: null, ready: false };
          if (record && record.ready){
            const targetHeight = flake.radius * 8;
            const targetWidth = targetHeight;
            window.YooneSnowDrawCenteredImage(context, record.img, flake.positionX, flake.positionY, targetWidth, targetHeight);
          }
          continue;
        }
        // 否则执行注册表中的形状渲染函数
        const registry = window.YooneSnowShapeRenderers || {};
        const renderer = registry[flake.shapeType] || registry['dot'];
        if (typeof renderer === 'function'){
          renderer(context, flake.positionX, flake.positionY, flake.radius);
        }
      }
    }

    function animate(){
      updateSnowflakes();
      drawSnowflakes();
      requestAnimationFrame(animate);
    }

    window.addEventListener('resize', function(){
      resizeCanvas();
      viewportWidth = window.innerWidth;
      viewportHeight = window.innerHeight;
    });

    animate();
  }

  // 条件判断 如果文档尚未加载则等待 DOMContentLoaded 事件
  if (document.readyState === 'loading'){
    document.addEventListener('DOMContentLoaded', init);
  } else {
    init();
  }
})();