Создание предварительного просмотра в ReactJ с использованием ширины области просмотра (vw) для размещения элементов в малом масштабе - PullRequest
Новая
       33

Создание предварительного просмотра в ReactJ с использованием ширины области просмотра (vw) для размещения элементов в малом масштабе

0 голосов
/ 12 октября 2019

Я создаю компонент в ReactJ, который отображает некоторый текст поверх изображения на странице. Этот текст настраивается в приложении диспетчера конфигурации, которое также создается с помощью ReactJ.

Я использую vw (ширина области просмотра) в качестве единиц, поскольку этот компонент должен быть отзывчивым. При использовании этих единиц размер текста всегда корректно подбирается правильно. И если я изменяю размер окон, то текст находится в том же месте.

Моя проблема в диспетчере конфигурации, где я настраиваю текст, который должен появиться, потому что я делаю предварительный просмотр этого компонента внутри модального окна,

Мне нужно правильно и точно определить, где будет выглядеть текст, как если бы это был оригинальный рендер. Это должно быть как миниатюра реального компонента. Я тоже использую VW, но он не работает. Он появляется на другом сайте контейнера, а также, когда я изменяю размер окна, текст тоже перемещается. Я пытался использовать модули vmin, но они тоже не работали.

Мне нужен контейнер, чтобы взять ссылку, как если бы это было окно браузера, чтобы единицы ширины области просмотра использовали те же измерения, что и предварительный просмотр.

Или, если у вас есть другая идея, сделать это.

Это сокращенная часть кода в ReactJS. Также государство заряжается тестовыми данными для понимания проблемы 

import React, { Component } from 'react';
import '../styles/main.scss';


class PreviewEditor extends Component {

    constructor(props) {
        super(props);
        this.state = {
            text: {
                text: '',
                fontSize: 2,
                position: {
                    vertical: {
                        key: 'top',
                        value: 20
                    },
                    horizontal: {
                        key: 'right',
                        value: 10
                    }
                }
            }
        }
    }

    render() {
        let object = this.props;
        return (
            <div>
                <div className='container-body'>
                    <div>
                        <div className="container-preview">
                            <img src={object.url}></img>
                            <div className="conteiner-text" style={{
                                [this.state.text.position.vertical.key]: this.state.text.position.vertical.value + "vw",
                                [this.state.text.position.horizontal.key]: this.state.text.position.horizontal.value + "vw",
                                fontSize: this.state.text.fontSize + "vw",
                            }}>
                                <label>{this.state.text.text}</label>
                            </div>
                        </div>
                    </div>
                    <div className="row">
                        ............ TODO
                    </div>
                </div>
            </div>
        );
    }
}
export default PreviewEditor

И эта часть CSS 

.container-preview {
  background-color: #2dc5c5;
    width: 100%;
    position: relative;
}
.container-preview > img{
  max-width: 100%;
}
.conteiner-text{
    display: inline-block;
    position: absolute;
}

1 Ответ

0 голосов
/ 12 октября 2019

vw расшифровывается как viewport width, оно стремится всегда устанавливать размер относительно текущего видового экрана, независимо от контейнера. Если вы просто хотите размер относительно ширины контейнера, вы должны использовать пользовательские размеры в процентах. Таким образом, в вашем случае вы можете установить ширину каждого контейнера по-разному (например, используя vw для фактического контейнера и пикселей для предварительного просмотра) и все их размеры контента в процентах, чтобы всегда иметь одинаковое соотношение в разных масштабах.

...