放大和缩小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中的图像

回答

相关问题