Question

我有一个反应组件，在单击图像时将一个圆圈覆盖在图像上。我无法找到一个很好的方法来调整图像大小，因为它似乎只需要pxl作为值。我想使它成为父<Col>元素的全宽。我正在使用react-konva和react-bootstrap。

import { PageHeader, Grid, Row, Col, 
ListGroup, ListGroupItem, Table, Panel, 
ButtonToolbar, Button, Modal, FormGroup, FormControl, HelpBlock, ControlLabel} 
from 'react-bootstrap';

import {BootstrapTable, TableHeaderColumn} from 'react-bootstrap-table';
import {Stage, Layer, Rect, Line, Image, Circle} from 'react-konva';

        <Grid>
            <Row>
                <PageHeader>System Boards<small> {this.state.name}</small></PageHeader>
                <Col md={6}>
                    <Stage height="100" width="100">
                        <Layer>
                            <Image 
                              image={this.state.image} 
                              height="100" 
                              width="100" 
                              onClick={ (event) => {
                                this.handleClickImage(event);
                              }}
                              onTap={ (event) => {
                                this.handleClickImage(event);
                              }}
                            />
                        </Layer>
                        {this.state.moves}
                   </Stage>
                </Col>
                <Col md={6}>

Answer 1

您可以使用react-bootsrap Media Content进行图像大小调整。你应该在画布外有一个非显示版本的图像，所以当你点击缩略图时你可以改变可见性。

Answer 2

您可以在Col中阅读componentDidMount尺寸，然后根据图像的所需尺寸更新您的组件状态。像这样：

componenentDidMount() {
    // you can add class or id to Col to find it in the DOM
    const colEl = document.querySelector('.col-selector');
    this.setState({
        imageWidth: colEl.offsetWidth,
        imageHeight: colEl.offsetHeight,
    });
}

可能你需要在窗口大小调整上做同样的事情。

将Konova图像调整为父元素的全宽

2 个答案: