在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
开源软件名称:rc-viewer开源软件地址:https://gitee.com/hanyukai/rc-viewer开源软件介绍:rc-viewerImage viewer component for React, supports rotation, scale, zoom and so on, based on viewer.js Demoumd <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script> <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script> <script src="https://cdn.bootcss.com/viewerjs/1.0.0/viewer.min.js"></script> <link href="https://cdn.bootcss.com/viewerjs/1.0.0/viewer.min.css" rel="stylesheet"> <script src="../dist/rc-viewer.js"></script> InstallationInstall from GitHub via NPM npm install rc-viewer Usageimport React,{ Component } from 'react';import RcViewer from 'rc-viewer'class Test extends Component{ render(){ const options={} return <div> <RcViewer options={options} ref='viewer'> <ul id="images"> <li><img src="picture-1.jpg" alt="Picture 1"></li> <li><img src="picture-2.jpg" alt="Picture 2"></li> <li><img src="picture-3.jpg" alt="Picture 3"></li> </ul> </RcViewer> <RcViewer options={options}> <img src="picture-3.jpg" alt="Picture 3"> </RcViewer> </div> }} Keyboard support
optionsYou may set viewer options with inline
Enable inline mode. button
Show the button on the top-right of the viewer. navbar
Specify the visibility of the navbar. title
Specify the visibility of the title (the current image's name and dimensions).
toolbar
Specify the visibility and layout of the toolbar its buttons. For example, toolbar: { zoomIn: 4, zoomOut: 4, oneToOne: 4, reset: 4, prev: 4, play: { show: 4, size: 'large', }, next: 4, rotateLeft: 4, rotateRight: 4, flipHorizontal: 4, flipVertical: 4,} tooltip
Show the tooltip with image ratio (percentage) when zoom in or zoom out. movable
Enable to move the image. zoomable
Enable to zoom the image. rotatable
Enable to rotate the image. scalable
Enable to scale the image. transition
Enable CSS3 Transition for some special elements. fullscreen
Enable to request full screen when play.
keyboard
Enable keyboard support. backdrop
Enable a modal backdrop, specify loading
Indicate if show a loading spinner when load image or not. loop
Indicate if enable loop viewing or not.
interval
The amount of time to delay between automatically cycling an image when playing. minWidth
Define the minimum width of the viewer.
minHeight
Define the minimum height of the viewer.
zoomRatio
Define the ratio when zoom the image by wheeling mouse. minZoomRatio
Define the min ratio of the image when zoom out. maxZoomRatio
Define the max ratio of the image when zoom in. zIndex
Define the CSS zIndexInline
Define the CSS url
Define where to get the original image URL for viewing.
For example: <img src="picture.jpg?size=160"> { url(image) { return image.src.replace('?size=160', ''); },} container
The container to put the viewer in modal mode.
filter
Filter the images for viewing (should return For example: { filter(image) { return image.complete; },} ready
A shortcut of the show
A shortcut of the shown
A shortcut of the hide
A shortcut of the hidden
A shortcut of the view
A shortcut of the viewed
A shortcut of the MethodsAll methods allow chain composition. As there are some asynchronous processes when start the viewer, you should call a method only when it is available, see the following lifecycle: { ready: function () { // 2 methods are available here: "show" and "destroy". }, shown: function () { // 9 methods are available here: "hide", "view", "prev", "next", "play", "stop", "full", "exit" and "destroy". }, viewed: function () { // All methods are available here except "show". this.viewer.zoomTo(1).rotateTo(180); }} show([immediate])
Show the viewer.
hide([immediate])
hide the viewer.
view([index])
View one of the images with image's index. If the viewer is not shown, will show the viewer first. const { viewer } = this.refs.viewer.getViewer()viewer.view(1); // View the second image prev([loop=false])
View the previous image. next([loop=false])
View the next image. move(offsetX[, offsetY])
Move the image with relative offsets. const { viewer } = this.refs.viewer.getViewer()viewer.move(1);viewer.move(-1, 0); // Move leftviewer.move(1, 0); // Move rightviewer.move(0, -1); // Move upviewer.move(0, 1); // Move down moveTo(x[, y])
Move the image to an absolute point. zoom(ratio[, hasTooltip])
Zoom the image with a relative ratio const { viewer } = this.refs.viewer.getViewer()viewer.zoom(0.1);viewer.zoom(-0.1); zoomTo(ratio[, hasTooltip])
Zoom the image to an absolute ratio. const { viewer } = this.refs.viewer.getViewer()viewer.zoomTo(0); // Zoom to zero size (0%)viewer.zoomTo(1); // Zoom to natural size (100%) rotate(degree)
Rotate the image with a relative degree. const { viewer } = this.refs.viewer.getViewer()viewer.rotate(90);viewer.rotate(-90); rotateTo(degree)
Rotate the image to an absolute degree. const { viewer } = this.refs.viewer.getViewer()viewer.rotateTo(0); // Reset to zero degreeviewer.rotateTo(360); // Rotate a full round scale(scaleX[, scaleY])
Scale the image. const { viewer } = this.refs.viewer.getViewer()viewer.scale(-1); // Flip both horizontal and verticalviewer.scale(-1, 1); // Flip horizontalviewer.scale(1, -1); // Flip vertical scaleX(scaleX)
Scale the abscissa of the image. const { viewer } = this.refs.viewer.getViewer()viewer.scaleX(-1); // Flip horizontal scaleY(scaleY)
Scale the ordinate of the image. const { viewer } = this.refs.viewer.getViewer()viewer.scaleY(-1); // Flip vertical play([fullscreen])
Play the images. stop()Stop play. full()Enter modal mode.
exit()Exit modal mode.
tooltip()Show the current ratio of the image with percentage.
toggle()Toggle the image size between its natural size and initial size. reset()Reset the image to its initial state. update()Update the viewer instance when the source images changed (added, removed or sorted).
destroy()Destroy the viewer and remove the instance. EventsAll events can access the viewer instance with
const { container } = this.refs.viewer.getViewer()container.addEventListener('viewed', function () { ....}, false); readyThis event fires when a viewer instance is ready for viewing.
showThis event fires when the viewer modal starts to show.
shownThis event fires when the viewer modal has shown.
hideThis event fires when the viewer modal starts to hide.
hiddenThis event fires when the viewer modal has hidden.
view
This event fires when a viewer starts to show (view) an image. viewed
This event fires when a viewer has shown (viewed) an image. Browser support
|
请发表评论