Адаптивный холст с 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;

reactjs javascript responsive line konvajs
person Juan Menashsheh    schedule 20.04.2018    source источник
comment
Это может быть полезно - konvajs.github.io/docs/sandbox/Responsive_Canvas.html   -  person lavrton    schedule 20.04.2018
comment
Я предлагаю вам использовать только Konva. Потому что всякий раз, когда состояние компонента реакции обновляется, каждый слой / узел перерисовывается, что бесполезно. Отделите холст от компонента React.   -  person Vidit    schedule 25.04.2018

Ответы (1)


arrow_upward
6
arrow_downward

«Адаптивная логика» действительно зависит от вашего приложения и желаемых вами целей пользовательского интерфейса. Самый простой способ добавить здесь отзывчивость - использовать масштабирование:

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;
person lavrton    schedule 23.04.2018