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

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

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}>

来源

2017-09-04 user2644013

可以使用反应 - bootsrap Media Content图像大小。您应该在画布外有非显示版本的图像，因此当您单击缩略图时，您可以更改可见性。

来源

2017-09-04 18:57:47 bennygenel

我使用konva图像，而不是引导 – user2644013

什么是你的图像的来源？ – bennygenel

您可以在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, 
    }); 
}

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

来源

2017-09-05 07:11:26 lavrton

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

回答

相关问题