MaxLevs
@MaxLevs

Как нарисовать бесконечную сетку?

Использую React + react-konva.
И имею вот такой результат
Результат

5e7869aa2998b751424413.png

С таким кодом модуля
Код

import React, { Component } from 'react';
import { Stage, Layer, Line, Text, Rect, Circle, Group, Label, Tag } from 'react-konva';


export default class Grid extends Component {
    constructor(...props) {
        super(...props);

        this.xOffset = this.props.xOffset || 0;
        this.yOffset = this.props.yOffset || 0;


        this.state = {
            verticalLines: [],
            horizontalLines: []
        }

    }

    render () {

        // this.mainVLine = this.textLine(this.props.width / 2, 0, this.props.width / 2, this.props.height);
        // this.mainHLine = this.textLine(0, this.props.height / 2, this.props.width, this.props.height / 2);

        // const vLines = [this.mainVLine];
        // for (let i = 1; this.mainVLine.x1 - i * this.props.step > 0; ++i) {
        //     vLines.push(this.textLine(this.mainVLine.x1 - i * this.props.step, this.mainVLine.y1, this.mainVLine.x2 - i * this.props.step, this.mainVLine.y2));
        // }
        // for (let i = 1; this.mainVLine.x1 + i * this.props.step < this.props.width; ++i) {
        //     vLines.push(this.textLine(this.mainVLine.x1 + i * this.props.step, this.mainVLine.y1, this.mainVLine.x2 + i * this.props.step, this.mainVLine.y2));
        // }

        // const hLines = [this.mainHLine];
        // for (let i = 1; this.mainHLine.y1 - i * this.props.step > 0; ++i) {
        //     hLines.push(this.textLine(this.mainHLine.x1, this.mainHLine.y1 - i * this.props.step, this.mainHLine.x2, this.mainHLine.y2 - i * this.props.step));
        // }
        // for (let i = 1; this.mainHLine.y1 + i * this.props.step < this.props.height; ++i) {
        //     hLines.push(this.textLine(this.mainHLine.x1, this.mainHLine.y1 + i * this.props.step, this.mainHLine.x2, this.mainHLine.y2 + i * this.props.step));
        // }

        this.mainVLine = this.textLine(0-this.xOffset, 0-this.yOffset, 0-this.xOffset, this.props.height-this.yOffset);
        this.mainHLine = this.textLine(0-this.xOffset, 0-this.yOffset, this.props.width-this.xOffset, 0-this.yOffset);

        const vLines = [this.mainVLine];
        for (let i = 1; this.mainVLine.x1 + i * this.props.step < this.props.width; ++i) {
            vLines.push(this.textLine(this.mainVLine.x1 + i * this.props.step, this.mainVLine.y1, this.mainVLine.x2 + i * this.props.step, this.mainVLine.y2));
        }

        const hLines = [this.mainHLine];
        for (let i = 1; this.mainHLine.y1 + i * this.props.step < this.props.height; ++i) {
            hLines.push(this.textLine(this.mainHLine.x1, this.mainHLine.y1 + i * this.props.step, this.mainHLine.x2, this.mainHLine.y2 + i * this.props.step));
        }

        this.state = {
            verticalLines: vLines,
            horizontalLines: hLines,
        };

        return (
            <Group>
                {this.state.verticalLines.map((el, i) => (
                    <Line points={[el.x1 + this.props.xOffset, el.y1 + this.props.yOffset, el.x2 + this.props.xOffset, el.y2 + this.props.yOffset]} stroke={this.props.stroke} key={`grid_v_line${i}`} />
                ))}
                {this.state.horizontalLines.map((el, i) => (
                    <Line points={[el.x1 + this.props.xOffset, el.y1 + this.props.yOffset, el.x2 + this.props.xOffset, el.y2 + this.props.yOffset]} stroke={this.props.stroke} key={`grid_h_line${i}`} />
                ))}
            </Group>
        );
    }

    textLine(x1, y1, x2, y2) {
        return {x1: x1, y1: y1, x2: x2, y2: y2};
    }
}



Призывается этот шайтан так:
<Grid step={30} xOffset={this.state.offsetX} yOffset={this.state.offsetY} stroke={'gray'} width={this.width} height={this.height} />


Ожидалось что при изменении offsetX и offsetY будет вызываться render(), перерассчитывать координаты остальных линий и это создаст иллюзию бесконечной сетки.

На деле получилось вот это
вот это

5e786b753b247185179981.png


Где ошибка в моих рассуждениях и какой путь верный? Хотелось бы следовать именно подходу React - изучаю его.
  • Вопрос задан
  • 76 просмотров
Решения вопроса 1
hzzzzl
@hzzzzl
this.state = {
            verticalLines: vLines,
            horizontalLines: hLines,
        };

так нельзя, реакт не узнает, что стейт изменился (пишется же в консоли предупреждение об этом, не?)

для начала попробуй
this.setState( {
            verticalLines: vLines,
            horizontalLines: hLines,
        } );

а дальше не знаю, сложно сказать без работающего кода в песочнице :)
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы