放大和縮小React.js中的圖像

我使用react-image-gallery來查看頁面上的圖像。現在我需要在點擊按鈕時實現放大和縮小功能。我已經詳細閱讀了react-image-gallery的文檔，但我找不到任何有用的信息。有一個名爲renderCustomControls的道具，我用它來顯示左上角的縮放功能按鈕，如下所示：放大和縮小React.js中的圖像

但我不知道如何使這項工作。任何形式的幫助將不勝感激。以下是一些相關的代碼：

export class CVPreview extends React.Component { 
    constructor(props) { 
    super(props) 

    this.state = { 
     images: [] 
    } 

    this.renderCustomControls = this.renderCustomControls.bind(this) 
    } 

    renderCustomControls() { 
    return(
     <span> 
     <FloatingActionButton mini={true} secondary={true}> 
      <ContentAdd /> 
     </FloatingActionButton> 
     <FloatingActionButton mini={true} secondary={true}> 
      <ContentRemove /> 
     </FloatingActionButton> 
     </span> 
    ) 
    } 

    render() { 
    const { openCVPreviewModal, onRequestClose } = this.props 

    return (
     <Dialog 
     className="cv-preview" 
     titleClassName="cv-preview-title" 
     contentClassName="cv-preview-content" 
     bodyClassName="cv-preview-body" 
     modal={false} 
     open={openCVPreviewModal} 
     autoDetectWindowHeight={false} 
     onRequestClose={onRequestClose}> 
     <IconButton 
      className='close-icon' 
      onClick={onRequestClose}> 
      <ClearIcon /> 
     </IconButton> 
     { 
      this.state.images.length > 0 && 
      <ImageGallery 
      items={this.state.images} 
      renderItem={this.renderItem} 
      renderLeftNav={this.renderLeftNav} 
      renderRightNav={this.renderRightNav} 
      showThumbnails={false} 
      showPlayButton={false} 
      showBullets={true} 
      showFullscreenButton={false} 
      renderCustomControls={this.renderCustomControls}/> 
     } 
     { 
      this.state.images.length === 0 && 
      <p className="no-images-msg"> 
      No preview images found. 
      </p> 
     } 
     </Dialog> 
    ) 
    } 
}

來源

2017-02-21 Arslan Tariq

閱讀官方文檔我明白'renderCustomControls'允許您呈現自定義組件。在這個自定義組件內部，您應該創建一個放大縮小組件，但該功能不是由此pkg提供的。你應該看看這個例子：'react-medium-image-zoom'或'react-image-zoom'。 –

看起來組件本身沒有縮放功能。您可能不得不擺弄實際的圖像對象本身（縮放圖像並重新加載）。要麼，要麼你將不得不尋找另一個更合適的組件。

有許多反應組件僅用於縮放目的。你也許可以利用一個這樣的組件沿邊react-image-gallery

來源

2017-02-21 12:49:28

現在，我試圖擺弄實際的圖像對象。你能否提一下我可以在react-image-gallery旁邊使用的一些組件？ –

https://github.com/ENDiGo/react-image-zoomer –

http://malaman.github.io/react-image-zoom/index.html –

放大和縮小React.js中的圖像

回答

相關問題