Javascript 反应灵敏的帆布，搭配React和Konva

我使用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;

从“React”导入React；
从“react konva”导入{Stage，Layer，Line}；
类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
}
render（）{
返回(
);
}
}
导出默认应用程序；

响应逻辑实际上取决于你的应用程序和你想要的用户界面目标。在此处添加响应的最简单方法是使用缩放：

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;

从“React”导入React；
从“react konva”导入{Stage，Layer，Line}；
类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
}
render（）{
//让我们认为您希望使所有对象在中可见
//700x700场景
const CANVAS_VIRTUAL_WIDTH=700；
const CANVAS_VIRTUAL_HEIGHT=700；
//现在，您可能想让它即使在小屏幕上也可见
//我们可以扩大规模
const scale=Math.min(
window.innerWidth/CANVAS\u VIRTUAL\u WIDTH，
window.innerHeight/CANVAS\u虚拟高度
);
返回(
);
}
}
导出默认应用程序；

响应逻辑实际上取决于你的应用程序和你想要的用户界面目标。在此处添加响应的最简单方法是使用缩放：

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;

从“React”导入React；
从“react konva”导入{Stage，Layer，Line}；
类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
}
render（）{
//让我们认为您希望使所有对象在中可见
//700x700场景
const CANVAS_VIRTUAL_WIDTH=700；
const CANVAS_VIRTUAL_HEIGHT=700；
//现在，您可能想让它即使在小屏幕上也可见
//我们可以扩大规模
const scale=Math.min(
window.innerWidth/CANVAS\u VIRTUAL\u WIDTH，
window.innerHeight/CANVAS\u虚拟高度
);
返回(
);
}
}
导出默认应用程序；

这可能会有所帮助-我建议您只使用Konva。因为无论何时更新react组件的状态，都会重新绘制每个层/节点，这是无用的。将画布与react组件分开。这可能会有所帮助-我建议您仅使用Konva。因为无论何时更新react组件的状态，都会重新绘制每个层/节点，这是无用的。将画布与react组件分离。