將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圖像調整爲父元素的全寬

回答

相關問題