如何基于React与Konva实现画布及线条的响应式适配

嘿，我来帮你搞定这个Konva线条超出屏幕的问题～ 核心原因是你现在的线条坐标是固定像素值，窗口尺寸变化时这些值不会跟着调整，所以就出现了超出的情况。下面给你两种实用的解决方案，你可以根据需求选择：

方法一：用缩放（scale）保持线条比例 #

这种方法会让线条保持原始的宽高比，完整适配屏幕，不会变形。修改后的代码如下：

import React from "react";
import { Stage, Layer, Line } from 'react-konva';

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      stageWidth: window.innerWidth,
      stageHeight: window.innerHeight,
      // 保存原始线条坐标，避免重复缩放导致精度丢失
      originalPoints: [0, 0, 576, 456, 509, 403, 20, 15, 300, 207]
    };
    this.handleResize = this.handleResize.bind(this);
  }

  componentDidMount() {
    // 监听窗口大小变化事件
    window.addEventListener('resize', this.handleResize);
  }

  componentWillUnmount() {
    // 组件卸载时移除监听，避免内存泄漏
    window.removeEventListener('resize', this.handleResize);
  }

  handleResize() {
    // 更新舞台尺寸
    this.setState({
      stageWidth: window.innerWidth,
      stageHeight: window.innerHeight
    });
  }

  render() {
    const { stageWidth, stageHeight, originalPoints } = this.state;
    
    // 计算线条的最大X和Y坐标，用来确定缩放比例
    const maxX = Math.max(...originalPoints.filter((_, idx) => idx % 2 === 0));
    const maxY = Math.max(...originalPoints.filter((_, idx) => idx % 2 === 1));
    
    // 计算缩放比例，+100是给线条留一些边距，可根据需求调整
    const scaleX = stageWidth / (maxX + 100);
    const scaleY = stageHeight / (maxY + 100);
    // 取最小的缩放比例，保证线条能完整显示在舞台内
    const scale = Math.min(scaleX, scaleY);

    return (
      <div>
        <Stage width={stageWidth} height={stageHeight}>
          <Layer>
            <Line
              x={50} // 配合边距的X偏移
              y={50} // 配合边距的Y偏移
              points={originalPoints}
              stroke="black"
              strokeWidth={2}
              scaleX={scale}
              scaleY={scale}
            />
          </Layer>
        </Stage>
      </div>
    );
  }
}

export default App;

关键点说明： #

• 保存originalPoints：避免每次窗口变化都基于已缩放的坐标计算，防止线条越缩越歪
• 监听resize事件：实时更新舞台的宽高
• 计算缩放比例：以线条的最大边界为基准，保证线条在任何屏幕尺寸下都能完整显示
• 边距调整：通过x、y偏移和缩放时的+100，让线条不会紧贴屏幕边缘

方法二：动态计算坐标适配屏幕 #

如果不需要保持线条的原始比例，希望线条能填满整个屏幕，可以直接按屏幕比例重新计算每个点的坐标：

import React from "react";
import { Stage, Layer, Line } from 'react-konva';

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      stageWidth: window.innerWidth,
      stageHeight: window.innerHeight,
      originalPoints: [0, 0, 576, 456, 509, 403, 20, 15, 300, 207]
    };
    this.handleResize = this.handleResize.bind(this);
  }

  componentDidMount() {
    window.addEventListener('resize', this.handleResize);
  }

  componentWillUnmount() {
    window.removeEventListener('resize', this.handleResize);
  }

  handleResize() {
    this.setState({
      stageWidth: window.innerWidth,
      stageHeight: window.innerHeight
    });
  }

  render() {
    const { stageWidth, stageHeight, originalPoints } = this.state;
    
    // 计算原始线条的最大X和Y
    const maxOriginalX = Math.max(...originalPoints.filter((_, idx) => idx % 2 === 0));
    const maxOriginalY = Math.max(...originalPoints.filter((_, idx) => idx % 2 === 1));
    
    // 按屏幕比例缩放每个点的坐标
    const scaledPoints = originalPoints.map((val, index) => {
      if (index % 2 === 0) {
        // X坐标：按屏幕宽度比例缩放
        return (val / maxOriginalX) * stageWidth;
      } else {
        // Y坐标：按屏幕高度比例缩放
        return (val / maxOriginalY) * stageHeight;
      }
    });

    return (
      <div>
        <Stage width={stageWidth} height={stageHeight}>
          <Layer>
            <Line
              points={scaledPoints}
              stroke="black"
              strokeWidth={2}
            />
          </Layer>
        </Stage>
      </div>
    );
  }
}

export default App;

适用场景： #

这种方式适合需要线条完全适配屏幕宽高的情况，比如背景线条、装饰性图形等，不过会改变线条的原始比例。

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