带有 React 和 Konva 的响应式画布

IT技术 javascript reactjs line responsive konvajs
2021-05-12 12:21:51

我使用 React 和 Konva 库来画一条简单的线。但是当我调整屏幕大小时，线条会留在屏幕之外。那么，我怎样才能让它响应呢？

这是我的代码：

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

class App extends React.Component {

  constructor(props) {
    super(props);
  }

  render() {
    return (
        <div>
            <Stage width={window.innerWidth} height={window.innerHeight}>
                <Layer>
                    <Line
                        x={100}
                        y={100}
                        points={[0,0,576,456,509,403,20,15,300,207,111,222,293,177]}
                        stroke="black"
                        strokeWidth={5}
                        ref="line"
                    />
                </Layer>
            </Stage>
        </div>
    );
  }
}

export default App;
1个回答

“响应逻辑”实际上取决于您的应用程序和您想要的 UI 目标。您可以在此处添加响应的最简单方法是使用缩放：

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

class App extends React.Component {

  constructor(props) {
    super(props);
  }

  render() {
    // lets think you want to make all your objects visible in
    // 700x700 scene
    const CANVAS_VIRTUAL_WIDTH = 700;
    const CANVAS_VIRTUAL_HEIGHT = 700;

    // now you may want to make it visible even on small screens
    // we can just scale it
    const scale = Math.min(
      window.innerWidth / CANVAS_VIRTUAL_WIDTH,
      window.innerHeight / CANVAS_VIRTUAL_HEIGHT
    );

    return (
        <div>
            <Stage width={window.innerWidth} height={window.innerHeight} scaleX={scale} scaleY={scale}>
                <Layer>
                    <Line
                        x={100}
                        y={100}
                        points={[0,0,576,456,509,403,20,15,300,207,111,222,293,177]}
                        stroke="black"
                        strokeWidth={5}
                        ref="line"
                    />
                </Layer>
            </Stage>
        </div>
    );
  }
}

export default App;
其它你可能感兴趣的问题
上一篇在 componentDidMount 中处理多个 axios get 请求 下一篇将 Webpack HMR 与提升的 Lerna React 项目一起使用