使用 React 和 Konva 响应式 canvas
Responsive canvas with React and 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;
"responsive logic" 实际上取决于您的应用和您期望的 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;
我使用 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;
"responsive logic" 实际上取决于您的应用和您期望的 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;