将 Konva 图像调整为父元素的全宽答案

【问题标题】：Sizing Konva image to full width of parent element将 Konva 图像调整为父元素的全宽
【发布时间】：2017-09-04 18:49:31
【问题描述】：

我有一个反应组件，当单击图像时，它会在图像上覆盖一个圆圈。我找不到调整图像大小的好方法，因为它似乎只将 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}>

【问题讨论】：

标签： reactjs react-bootstrap konvajs

【解决方案1】：

您可以使用 react-bootsrap Media Content 来调整图像大小。您应该在画布之外有一个不显示的图像版本，因此当您单击缩略图时，您可以更改可见性。

【讨论】：

我使用的是 konva 镜像，而不是 bootstrap
你的图片来源是什么？

【解决方案2】：

您可以在componentDidMount 中读取Col 大小，然后将组件的状态更新为图像所需的大小。像这样的：

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,
    });
}

您可能需要在调整窗口大小时执行相同操作。

【讨论】：