AngularJS环境下窗口Resize时Canvas图表动态调整问题咨询

嘿，我刚好在AngularJS项目里处理过类似的Canvas自适应问题，你遇到的这两个坑——窗口调整时图表消失、clearRect清不掉导致重叠，其实都是Canvas绘图机制和AngularJS生命周期结合的常见问题，咱们一步步来解决：

先搞清楚核心问题的根源 #

1. 图表消失的原因：你已经摸到了门道——Canvas的width和height属性是它的绘图缓冲区尺寸，直接修改这两个值会清空整个缓冲区，之前绘制的所有路径、图形都会被重置，所以必须重新执行绘图逻辑，而且要基于新的宽高重新计算坐标。
2. clearRect无效、重绘重叠的原因：大概率是你调用clearRect时用的是旧的宽高值，或者混淆了Canvas的元素宽高和CSS样式宽高——clearRect(0, 0, width, height)里的width/height必须是Canvas元素本身的canvas.width和canvas.height，而不是CSS设置的宽高，不然清除范围不对，新的绘图就会和旧的重叠。

针对AngularJS的具体实现步骤 #

在AngularJS里，最好用自定义指令来封装Canvas图表，这样能更好地管理DOM操作、事件监听和生命周期，避免控制器里直接操作DOM的混乱。下面是完整的示例代码，包含防抖处理、尺寸适配、重绘逻辑：

1. 封装响应式Canvas图表指令 #

angular.module('yourAppModule').directive('responsiveCanvasChart', function($timeout) {
  return {
    restrict: 'E',
    template: '<canvas class="chart-canvas"></canvas>',
    link: function(scope, element) {
      // 获取Canvas元素和绘图上下文
      const canvas = element.find('canvas')[0];
      const ctx = canvas.getContext('2d');
      let resizeDebounceTimer;

      // 假设这是你的图表数据（可以绑定到scope，实现数据驱动）
      scope.chartData = [15, 30, 25, 40, 35];

      // 核心：根据当前Canvas尺寸重绘图表的函数
      function redrawChart() {
        // 第一步：彻底清除整个Canvas缓冲区
        // 必须用canvas.width和canvas.height，而不是CSS的宽高！
        ctx.clearRect(0, 0, canvas.width, canvas.height);

        // 第二步：基于新的Canvas尺寸计算绘图坐标比例
        const chartWidth = canvas.width;
        const chartHeight = canvas.height;
        const barCount = scope.chartData.length;
        const barWidth = chartWidth / barCount - 8; // 减去间距
        const maxValue = Math.max(...scope.chartData);
        const yScale = chartHeight / maxValue;

        // 第三步：执行具体的绘图逻辑（这里以柱状图为例）
        scope.chartData.forEach((value, index) => {
          const x = index * (chartWidth / barCount) + 4; // 加上间距
          const barHeight = value * yScale;
          ctx.fillStyle = '#4CAF50';
          ctx.fillRect(x, chartHeight - barHeight, barWidth, barHeight);

          // 绘制数值标签
          ctx.fillStyle = '#333';
          ctx.font = '12px Arial';
          ctx.textAlign = 'center';
          ctx.fillText(value, x + barWidth/2, chartHeight - barHeight - 5);
        });
      }

      // 设置Canvas的实际尺寸（绘图缓冲区尺寸）
      function updateCanvasSize() {
        // 这里可以根据你的布局需求调整，比如用父容器宽高或窗口宽高
        const parentWidth = element.parent()[0].offsetWidth;
        // 对应你原来的计算方式：窗口宽减去2%
        canvas.width = parentWidth - (window.innerWidth * 0.02);
        canvas.height = 350; // 固定高度或自适应，根据需求调整

        // 尺寸更新后立即重绘
        redrawChart();
      }

      // 处理窗口resize事件，添加防抖避免频繁重绘
      function handleWindowResize() {
        if (resizeDebounceTimer) {
          $timeout.cancel(resizeDebounceTimer);
        }
        // 100ms防抖，窗口停止调整后再执行重绘
        resizeDebounceTimer = $timeout(updateCanvasSize, 100);
      }

      // 初始化：设置初始尺寸并绘制图表
      updateCanvasSize();

      // 监听窗口resize事件
      angular.element(window).on('resize', handleWindowResize);

      // 监听数据变化，自动重绘（可选，实现数据驱动）
      scope.$watch('chartData', function(newData) {
        if (newData) redrawChart();
      }, true);

      // 指令销毁时清理资源，避免内存泄漏
      scope.$on('$destroy', () => {
        angular.element(window).off('resize', handleWindowResize);
        if (resizeDebounceTimer) {
          $timeout.cancel(resizeDebounceTimer);
        }
      });
    }
  };
});

2. 在HTML中使用指令 #

<div class="chart-container">
  <responsive-canvas-chart></responsive-canvas-chart>
</div>

3. 关键注意事项 #

• 区分Canvas元素宽高和CSS宽高：如果需要用CSS控制Canvas的显示尺寸，要确保元素宽高和CSS宽高的比例一致，比如：

  .chart-canvas {
    width: 100%; /* 显示宽度占满父容器 */
    height: auto; /* 保持宽高比 */
  }
  

  这里的height: auto会根据元素的width和height比例自动调整显示高度，避免图表拉伸变形。
• 防抖处理的重要性：窗口resize事件会频繁触发（每秒几十次），直接重绘会导致性能问题，用$timeout做防抖可以让窗口停止调整后再执行重绘，提升用户体验。
• 清理资源：在指令销毁时移除resize监听、取消未执行的定时器，这是AngularJS中避免内存泄漏的关键步骤。

排查clearRect无效的额外技巧 #

如果还是遇到clearRect无法清除的情况，可以试试：

1. 强制重置Canvas的宽高（比如canvas.width = canvas.width），这会清空缓冲区，然后再执行clearRect和重绘。
2. 检查绘图逻辑中是否有save()和restore()的使用不当，导致绘图上下文的状态异常，影响clearRect的效果。

内容的提问来源于stack exchange，提问作者Kota