Added a small image viewer to the demo application

This commit is contained in:
Uwe Kindler 2022-11-04 20:14:04 +01:00
parent 1bf698478d
commit 9c537340c5
13 changed files with 714 additions and 6 deletions

281
demo/ImageViewer.cpp Normal file
View File

@ -0,0 +1,281 @@
//============================================================================
/// \file ImageViewer.cpp
/// \author Uwe Kindler
/// \date 04.11.2022
/// \brief Implementation of CImageViewer
//============================================================================
//============================================================================
// INCLUDES
//============================================================================
#include "ImageViewer.h"
#include <math.h>
#include <QLabel>
#include <QImageReader>
#include <QImageWriter>
#include <QMessageBox>
#include <QApplication>
#include <QDir>
#include <QColorSpace>
#include <QFileDialog>
#include <QStandardPaths>
#include <QAction>
#include <QScrollBar>
#include <QPixmap>
#include <QPainter>
#include <QImage>
#include <QMouseEvent>
#include <QWheelEvent>
#include "RenderWidget.h"
/**
* Private image viewer data
*/
struct ImageViewerPrivate
{
CImageViewer* _this;
CRenderWidget* RenderWidget;///< renders the image to screen
bool AutoFit;///< automatically fit image to window size on resize events
QSize ImageSize;///< stores the image size to detect image size changes
QPoint MouseMoveStartPos;///< for calculation of mouse move vector
QLabel* ScalingLabel;///< label displays scaling factor
QList<QWidget*> OverlayTools;///< list of tool widget to overlay
ImageViewerPrivate(CImageViewer* _public) : _this(_public) {}
};
//============================================================================
CImageViewer::CImageViewer(QWidget *parent)
: Super(parent),
d(new ImageViewerPrivate(this))
{
d->AutoFit = true;
d->RenderWidget = new CRenderWidget(this);
this->setBackgroundRole(QPalette::Light);
this->setAlignment(Qt::AlignCenter);
this->setWidget(d->RenderWidget);
this->createActions();
this->setMouseTracking(false); // only produce mouse move events if mouse button pressed
}
//============================================================================
CImageViewer::~CImageViewer()
{
delete d;
}
//============================================================================
bool CImageViewer::loadFile(const QString& fileName)
{
QImageReader reader(fileName);
reader.setAutoTransform(true);
const QImage newImage = reader.read();
if (newImage.isNull())
{
QMessageBox::information(this, QGuiApplication::applicationDisplayName(),
tr("Cannot load %1: %2")
.arg(QDir::toNativeSeparators(fileName), reader.errorString()));
return false;
}
setImage(newImage);
setWindowFilePath(fileName);
return true;
}
//===========================================================================
void CImageViewer::setImage(const QImage &newImage)
{
d->RenderWidget->showImage(newImage);
this->adjustDisplaySize(newImage);
}
//============================================================================
void CImageViewer::adjustDisplaySize(const QImage& Image)
{
if (d->ImageSize == Image.size())
{
return;
}
d->ImageSize = Image.size();
if (d->AutoFit)
{
this->fitToWindow();
}
}
//===========================================================================
static void initializeImageFileDialog(QFileDialog &dialog, QFileDialog::AcceptMode acceptMode)
{
static bool firstDialog = true;
if (firstDialog) {
firstDialog = false;
const QStringList picturesLocations = QStandardPaths::standardLocations(QStandardPaths::PicturesLocation);
dialog.setDirectory(picturesLocations.isEmpty() ? QDir::currentPath() : picturesLocations.last());
}
QStringList mimeTypeFilters;
const QByteArrayList supportedMimeTypes = acceptMode == QFileDialog::AcceptOpen
? QImageReader::supportedMimeTypes() : QImageWriter::supportedMimeTypes();
for (const QByteArray &mimeTypeName : supportedMimeTypes)
mimeTypeFilters.append(mimeTypeName);
mimeTypeFilters.sort();
dialog.setMimeTypeFilters(mimeTypeFilters);
dialog.selectMimeTypeFilter("image/jpeg");
if (acceptMode == QFileDialog::AcceptSave)
dialog.setDefaultSuffix("jpg");
}
//===========================================================================
void CImageViewer::open()
{
QFileDialog dialog(this, tr("Open File"));
initializeImageFileDialog(dialog, QFileDialog::AcceptOpen);
while (dialog.exec() == QDialog::Accepted && !loadFile(dialog.selectedFiles().first())) {}
}
//===========================================================================
void CImageViewer::createActions()
{
QAction* a;
a = new QAction(tr("&Open..."));
a->setIcon(QIcon(":/adsdemo/images/perm_media.svg"));
connect(a, &QAction::triggered, this, &CImageViewer::open);
a->setShortcut(QKeySequence::Open);;
this->addAction(a);
a = new QAction(tr("Fit on Screen"));
a->setIcon(QIcon(":/adsdemo/images/zoom_out_map.svg"));
connect(a, &QAction::triggered, this, &CImageViewer::fitToWindow);
this->addAction(a);
a = new QAction(tr("Actual Pixels"));
a->setIcon(QIcon(":/adsdemo/images/find_in_page.svg"));
connect(a, &QAction::triggered, this, &CImageViewer::normalSize);
this->addAction(a);
a = new QAction(this);
a->setSeparator(true);
this->addAction(a);
a = new QAction(tr("Zoom In (25%)"));
a->setIcon(QIcon(":/adsdemo/images/zoom_in.svg"));
connect(a, &QAction::triggered, this, &CImageViewer::zoomIn);
this->addAction(a);
a = new QAction(tr("Zoom Out (25%)"));
a->setIcon(QIcon(":/adsdemo/images/zoom_out.svg"));
connect(a, &QAction::triggered, this, &CImageViewer::zoomOut);
this->addAction(a);
this->setContextMenuPolicy(Qt::ActionsContextMenu);
}
//===========================================================================
void CImageViewer::zoomIn()
{
d->AutoFit = false;
d->RenderWidget->zoomIn();
}
//===========================================================================
void CImageViewer::zoomOut()
{
d->AutoFit = false;
d->RenderWidget->zoomOut();
}
//===========================================================================
void CImageViewer::normalSize()
{
d->AutoFit = false;
d->RenderWidget->normalSize();
}
//===========================================================================
void CImageViewer::fitToWindow()
{
d->AutoFit = true;
d->RenderWidget->scaleToSize(this->maximumViewportSize());
}
//============================================================================
void CImageViewer::resizeEvent(QResizeEvent* ResizeEvent)
{
Super::resizeEvent(ResizeEvent);
if (d->AutoFit)
{
this->fitToWindow();
}
}
//============================================================================
void CImageViewer::mousePressEvent(QMouseEvent* Event)
{
d->RenderWidget->setCursor(Qt::ClosedHandCursor);
d->MouseMoveStartPos = Event->pos();
Super::mousePressEvent(Event);
}
//============================================================================
void CImageViewer::mouseReleaseEvent(QMouseEvent* Event)
{
d->RenderWidget->setCursor(Qt::OpenHandCursor);
Super::mouseReleaseEvent(Event);
}
//============================================================================
void CImageViewer::mouseMoveEvent(QMouseEvent* Event)
{
QPoint MoveVector = Event->pos() - d->MouseMoveStartPos;
d->MouseMoveStartPos = Event->pos();
horizontalScrollBar()->setValue(horizontalScrollBar()->value()
- MoveVector.x());
verticalScrollBar()->setValue(verticalScrollBar()->value() - MoveVector.y());
}
//============================================================================
void CImageViewer::wheelEvent(QWheelEvent* Event)
{
double numDegrees = Event->delta() / 8;
double numSteps = numDegrees / 15;
d->AutoFit = false;
double Zoom;
if (numSteps < 0)
{
Zoom = pow(0.9, 0 - numSteps);
}
else
{
Zoom = pow(1.10, numSteps);
}
d->RenderWidget->zoomByValue(Zoom);
}
#include "moc_ImageViewer.cpp"
//---------------------------------------------------------------------------
// EOF ImageViewer.cpp

88
demo/ImageViewer.h Normal file
View File

@ -0,0 +1,88 @@
#ifndef ImageViewerH
#define ImageViewerH
//============================================================================
/// \file ImageViewer.h
/// \author Uwe Kindler
/// \date 04.11.2022
/// \brief Declaration of CImageViewer
//============================================================================
//============================================================================
// INCLUDES
//============================================================================
#include <QScrollArea>
QT_BEGIN_NAMESPACE
class QLabel;
QT_END_NAMESPACE
struct ImageViewerPrivate;
/**
* Tiny simple image viewer for showing images in demo
*/
class CImageViewer : public QScrollArea
{
Q_OBJECT
public:
using Super = QScrollArea;
explicit CImageViewer(QWidget *parent = nullptr);
virtual ~CImageViewer();
bool loadFile(const QString& Filename);
void setImage(const QImage &newImage);
public Q_SLOTS:
void open();
void zoomIn();
void zoomOut();
void normalSize();
void fitToWindow();
protected:
/**
* @brief Reimplemented from QScrollArea to adjust image scaling if m_AutoFit is
* true.
*/
virtual void resizeEvent(QResizeEvent* ResizeEvent);
/**
* @brief Handle mouse press events.
*/
virtual void mousePressEvent(QMouseEvent* Event);
/**
* @brief Handles mouse release events.
*/
virtual void mouseReleaseEvent(QMouseEvent* Event);
/**
* @brief Handle mouse move events.
*/
virtual void mouseMoveEvent(QMouseEvent* Event);
/**
* @brief Use mouse wheel to change scaling of the image.
*/
virtual void wheelEvent(QWheelEvent* Event);
private:
/**
* @brief Create the wiget actions.
*/
void createActions();
/**
* @brief Adjust size of render widget in case of image size change.
* @param[in] Image The new image that may have a different image size.
*/
void adjustDisplaySize(const QImage& Image);
ImageViewerPrivate* d;
friend ImageViewerPrivate;
};
//---------------------------------------------------------------------------
#endif // ImageViewerH

View File

@ -80,6 +80,7 @@
#include "DockComponentsFactory.h"
#include "StatusDialog.h"
#include "DockSplitter.h"
#include "ImageViewer.h"
/**
@ -317,6 +318,22 @@ struct MainWindowPrivate
return DockWidget;
}
/**
* Creates a simply image viewr
*/
ads::CDockWidget* createImageViewer()
{
static int ImageViewerCount = 0;
auto w = new CImageViewer();
auto Result = w->loadFile(":adsdemo/images/ads_logo.svg");
qDebug() << "loadFile result: " << Result;
ads::CDockWidget* DockWidget = new ads::CDockWidget(QString("Image Viewer %1").arg(ImageViewerCount++));
DockWidget->setWidget(w,ads:: CDockWidget::ForceNoScrollArea);
auto ToolBar = DockWidget->createDefaultToolBar();
ToolBar->addActions(w->actions());
return DockWidget;
}
/**
* Create a table widget
*/
@ -510,6 +527,10 @@ void MainWindowPrivate::createContent()
_this->connect(DockWidget, SIGNAL(viewToggled(bool)), SLOT(onViewToggled(bool)));
_this->connect(DockWidget, SIGNAL(visibilityChanged(bool)), SLOT(onViewVisibilityChanged(bool)));
}
// Create image viewer
DockWidget = createImageViewer();
DockManager->addDockWidget(ads::LeftDockWidgetArea, DockWidget);
}

111
demo/RenderWidget.h Normal file
View File

@ -0,0 +1,111 @@
#ifndef RenderWidgetH
#define RenderWidgetH
//============================================================================
/// \file RenderWidget.h
/// \author Uwe Kindler
/// \date 04.11.2022
/// \brief Declaration of CRenderWidget
//============================================================================
//============================================================================
// INCLUDES
//============================================================================
#include <QWidget>
#include <QPixmap>
//============================================================================
// FORWARD DECLARATIONS
//============================================================================
class QImage;
/**
* @brief Widget for fast display of images (i.e. for video capture devices)
*/
class CRenderWidget : public QWidget
{
Q_OBJECT
private:
QPixmap m_Image;
double m_ScaleFactor;
protected:
/**
* @brief Reimplemented paint event method showing actual image.
*/
void paintEvent(QPaintEvent* PaintEvent);
/**
* @brief Change scale factor
*/
void scaleImage(double ScaleFactor);
/**
* @brief Adjust widget size to size of image.
*/
void adjustWidgetSize();
public:
/**
* Constructor
* @param[in] Parent Parent widget.
*/
CRenderWidget(QWidget* Parent);
/**
* Destructor
*/
virtual ~CRenderWidget();
signals:
/**
* @brief Signalize change of captured image size.
* @param ImageSize New image size.
*/
void imageSizeChanged(const QSize& ImageSize);
public slots:
/**
* @brief Show new image in render widget.
*/
void showImage(const QImage& Image);
/**
* @brief Zoom into the scene.
* This function decreases the scaling factor by setting it to the previous
* value in internal scaling list.
* @brief Steps The number of steps to zoom in. One step is 25%.
*/
void zoomIn();
/**
* @brief Zoom out of the scene.
* This function decreases the scaling factor by setting it to the next
* value in internal scaling list.
* @brief Steps The number of steps to zoom out. One step is 25%.
*/
void zoomOut();
/**
* @brief Change zoom by zoom value.
* @param[in] ZoomValue This is the zoom value to apply. A value of 1
* means no change a value > 1 increases the image (i.e. 1.25 would increase
* the image by 25%) and a value of < 1 decreases the image size (i.e.
* a value of 0.8 would decrease the image size by 25%).
*/
void zoomByValue(double ZoomValue);
/**
* @brief Resets the actual scaling to 1 and display the image with its
* actual pixel size.
*/
void normalSize();
/**
* @brief Scales the wiget and its content image to the given TargetSize
*/
void scaleToSize(const QSize& TargetSize);
}; // class CRenderWidget
//---------------------------------------------------------------------------
#endif // RenderWidgetH

View File

@ -2,7 +2,7 @@ ADS_OUT_ROOT = $${OUT_PWD}/..
TARGET = AdvancedDockingSystemDemo
DESTDIR = $${ADS_OUT_ROOT}/lib
QT += core gui widgets
QT += core gui widgets svg
include(../ads.pri)
@ -20,14 +20,19 @@ adsBuildStatic {
DEFINES += ADS_STATIC
}
SOURCES += \
main.cpp \
MainWindow.cpp \
StatusDialog.cpp
HEADERS += \
MainWindow.h \
StatusDialog.h
StatusDialog.h \
ImageViewer.h \
RenderWidget.h
SOURCES += \
main.cpp \
MainWindow.cpp \
StatusDialog.cpp \
ImageViewer.cpp \
RenderWidget.cpp
FORMS += \
mainwindow.ui \

View File

@ -19,5 +19,12 @@
<file>images/docked_editor.svg</file>
<file>res/visual_studio_light.css</file>
<file>images/color_lens.svg</file>
<file>images/ads_icon.svg</file>
<file>images/ads_logo.svg</file>
<file>images/find_in_page.svg</file>
<file>images/perm_media.svg</file>
<file>images/zoom_in.svg</file>
<file>images/zoom_out.svg</file>
<file>images/zoom_out_map.svg</file>
</qresource>
</RCC>

77
demo/images/ads_icon.svg Normal file
View File

@ -0,0 +1,77 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
version="1.1"
viewBox="0 0 1023.99 1023.99"
id="svg26"
sodipodi:docname="ads_icon.svg"
inkscape:version="1.1 (c68e22c387, 2021-05-23)"
width="1023.99"
height="1023.99"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<defs
id="defs30" />
<sodipodi:namedview
id="namedview28"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
showgrid="false"
showguides="true"
inkscape:guide-bbox="true"
inkscape:zoom="0.12999302"
inkscape:cx="3277.099"
inkscape:cy="-257.70614"
inkscape:window-width="1920"
inkscape:window-height="1017"
inkscape:window-x="1912"
inkscape:window-y="-8"
inkscape:window-maximized="1"
inkscape:current-layer="svg26"
fit-margin-top="0"
fit-margin-left="0"
fit-margin-right="0"
fit-margin-bottom="0" />
<desc
id="desc2">electric_iron icon - Licensed under Iconfu Standard License v1.0 (https://www.iconfu.com/iconfu_standard_license) - Incors GmbH</desc>
<text
xml:space="preserve"
style="font-style:normal;font-weight:normal;font-size:40px;line-height:1.25;font-family:sans-serif;fill:#000000;fill-opacity:1;stroke:none"
x="1251.1022"
y="1305.4956"
id="text9788"><tspan
sodipodi:role="line"
id="tspan9786"
x="1251.1022"
y="1305.4956" /></text>
<g
id="g94691"
transform="translate(581.23034,1750.5233)">
<path
d="m 191.63966,-726.53328 h -521.75 c -138.69,0 -251.12,-112.43001 -251.12,-251.12 v -521.75002 c 0,-138.69 112.43,-251.12 251.12,-251.12 h 521.75 c 138.69,0 251.12,112.43 251.12,251.12 v 521.75002 c 0,138.68999 -112.43,251.12 -251.12,251.12 z"
fill="#707070"
id="path4-5"
style="mix-blend-mode:normal;fill:#e0e0e0;fill-opacity:1;fill-rule:nonzero" />
<path
id="path927"
style="mix-blend-mode:normal;fill:#009ddd;fill-opacity:1;fill-rule:nonzero"
d="m -175.90039,-1515.8633 v 256 h 469.3301 v -256 z" />
<path
id="path16513"
style="mix-blend-mode:normal;fill:#ff9833;fill-opacity:1;fill-rule:nonzero"
d="m 80.099609,-1217.1934 v 256.00004 H 293.42969 v -256.00004 z" />
<path
id="path16513-5"
style="mix-blend-mode:normal;fill:#accb01;fill-opacity:1;fill-rule:nonzero"
d="m -175.90039,-1217.1933 v 256 H 37.42969 v -256 z" />
<path
id="path24788"
style="mix-blend-mode:normal;fill:#0083c3;fill-opacity:1;fill-rule:nonzero"
d="m -431.90039,-1515.8633 v 554.66994 h 213.33008 v -554.66994 z" />
</g>
</svg>

After

Width:  |  Height:  |  Size: 2.8 KiB

88
demo/images/ads_logo.svg Normal file
View File

@ -0,0 +1,88 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
version="1.1"
viewBox="0 0 6907.3028 1023.99"
id="svg26"
sodipodi:docname="ads_logo.svg"
inkscape:version="1.1 (c68e22c387, 2021-05-23)"
width="6907.3027"
height="1023.99"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<defs
id="defs30" />
<sodipodi:namedview
id="namedview28"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
showgrid="false"
showguides="true"
inkscape:guide-bbox="true"
inkscape:zoom="0.12999302"
inkscape:cx="3277.099"
inkscape:cy="-257.70614"
inkscape:window-width="1920"
inkscape:window-height="1017"
inkscape:window-x="1912"
inkscape:window-y="-8"
inkscape:window-maximized="1"
inkscape:current-layer="svg26"
fit-margin-top="0"
fit-margin-left="0"
fit-margin-right="0"
fit-margin-bottom="0" />
<desc
id="desc2">electric_iron icon - Licensed under Iconfu Standard License v1.0 (https://www.iconfu.com/iconfu_standard_license) - Incors GmbH</desc>
<text
xml:space="preserve"
style="font-style:normal;font-weight:normal;font-size:40px;line-height:1.25;font-family:sans-serif;fill:#000000;fill-opacity:1;stroke:none"
x="1251.1022"
y="1305.4956"
id="text9788"><tspan
sodipodi:role="line"
id="tspan9786"
x="1251.1022"
y="1305.4956" /></text>
<text
xml:space="preserve"
style="font-style:normal;font-weight:normal;font-size:628.003px;line-height:1.25;font-family:sans-serif;fill:#8f918f;fill-opacity:1;stroke:none;stroke-width:1"
x="1178.9221"
y="718.37329"
id="text15608"><tspan
sodipodi:role="line"
id="tspan15606"
x="1178.9221"
y="718.37329"
style="font-style:normal;font-variant:normal;font-weight:300;font-stretch:normal;font-size:628.003px;font-family:'Segoe UI';-inkscape-font-specification:'Segoe UI Light';fill:#8f918f;fill-opacity:1;stroke-width:1">Qt Advanced Docking</tspan></text>
<g
id="g94691"
transform="translate(581.23034,1750.5233)">
<path
d="m 191.63966,-726.53328 h -521.75 c -138.69,0 -251.12,-112.43001 -251.12,-251.12 v -521.75002 c 0,-138.69 112.43,-251.12 251.12,-251.12 h 521.75 c 138.69,0 251.12,112.43 251.12,251.12 v 521.75002 c 0,138.68999 -112.43,251.12 -251.12,251.12 z"
fill="#707070"
id="path4-5"
style="mix-blend-mode:normal;fill:#e0e0e0;fill-opacity:1;fill-rule:nonzero" />
<path
id="path927"
style="mix-blend-mode:normal;fill:#009ddd;fill-opacity:1;fill-rule:nonzero"
d="m -175.90039,-1515.8633 v 256 h 469.3301 v -256 z" />
<path
id="path16513"
style="mix-blend-mode:normal;fill:#ff9833;fill-opacity:1;fill-rule:nonzero"
d="m 80.099609,-1217.1934 v 256.00004 H 293.42969 v -256.00004 z" />
<path
id="path16513-5"
style="mix-blend-mode:normal;fill:#accb01;fill-opacity:1;fill-rule:nonzero"
d="m -175.90039,-1217.1933 v 256 H 37.42969 v -256 z" />
<path
id="path24788"
style="mix-blend-mode:normal;fill:#0083c3;fill-opacity:1;fill-rule:nonzero"
d="m -431.90039,-1515.8633 v 554.66994 h 213.33008 v -554.66994 z" />
</g>
</svg>

After

Width:  |  Height:  |  Size: 3.4 KiB

View File

@ -0,0 +1,6 @@
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0,0,1024,1024">
<desc>find_in_page icon - Licensed under Apache License v2.0 (http://www.apache.org/licenses/LICENSE-2.0) - Created with Iconfu.com - Derivative work of Material icons (Copyright Google Inc.)</desc>
<g fill="#03b8e5" fill-rule="nonzero" style="mix-blend-mode: normal">
<path d="M689.92,672c22.19,-33.71 35.41,-73.81 35.41,-117.33c0,-117.76 -95.57,-213.34 -213.33,-213.34c-117.76,0 -213.33,95.58 -213.33,213.34c0,117.76 95.57,213.33 213.33,213.33c43.52,0 83.63,-13.22 117.76,-35.41l189.01,189.01c-14.51,10.67 -31.57,17.07 -50.77,17.07h-512.43c-46.93,0 -84.9,-38.41 -84.9,-85.34l0.42,-682.66c0,-46.93 37.98,-85.34 84.91,-85.34h341.33l256,256v494.51zM512,426.67c70.83,0 128,57.17 128,128c0,70.83 -57.17,128 -128,128c-70.83,0 -128,-57.17 -128,-128c0,-70.83 57.17,-128 128,-128z"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 915 B

View File

@ -0,0 +1,6 @@
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0,0,1024,1024">
<desc>perm_media icon - Licensed under Apache License v2.0 (http://www.apache.org/licenses/LICENSE-2.0) - Created with Iconfu.com - Derivative work of Material icons (Copyright Google Inc.)</desc>
<g fill="#03b8e5" fill-rule="nonzero" style="mix-blend-mode: normal">
<path d="M1024,256v426.67c0,46.93 -38.4,85.33 -85.33,85.33h-682.67c-46.93,0 -85.33,-38.4 -85.33,-85.33l0.42,-512c0,-46.93 37.98,-85.34 84.91,-85.34h256l85.33,85.34h341.34c46.93,0 85.33,38.4 85.33,85.33zM85.33,853.33h768v85.34h-768c-46.93,0 -85.33,-38.41 -85.33,-85.34l0.43,-384h-0.43v-213.33h85.33zM896,640l-149.33,-192l-106.67,128.43l-149.33,-192.43l-192,256z"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 769 B

6
demo/images/zoom_in.svg Normal file
View File

@ -0,0 +1,6 @@
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0,0,1024,1024">
<desc>zoom_in icon - Licensed under Apache License v2.0 (http://www.apache.org/licenses/LICENSE-2.0) - Created with Iconfu.com - Derivative work of Material icons (Copyright Google Inc.)</desc>
<g fill="#03b8e5" fill-rule="nonzero" style="mix-blend-mode: normal">
<path d="M874.24,810.67l-63.57,63.57l-213.34,-212.91v-33.7l-11.52,-11.95c-48.64,41.81 -111.79,66.99 -180.48,66.99c-153.17,0 -277.33,-124.17 -277.33,-277.34c0,-153.17 124.16,-277.33 277.33,-277.33c153.17,0 277.34,124.16 277.34,277.33c0,68.69 -25.18,131.84 -66.99,180.48l11.95,11.52h33.7zM597.33,405.33c0,-106.24 -85.76,-192 -192,-192c-106.24,0 -192,85.76 -192,192c0,106.24 85.76,192 192,192c106.24,0 192,-85.76 192,-192zM512,426.67h-85.33v85.33h-42.67v-85.33h-85.33v-42.67h85.33v-85.33h42.67v85.33h85.33z"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 909 B

6
demo/images/zoom_out.svg Normal file
View File

@ -0,0 +1,6 @@
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0,0,1024,1024">
<desc>zoom_out icon - Licensed under Apache License v2.0 (http://www.apache.org/licenses/LICENSE-2.0) - Created with Iconfu.com - Derivative work of Material icons (Copyright Google Inc.)</desc>
<g fill="#03b8e5" fill-rule="nonzero" style="mix-blend-mode: normal">
<path d="M874.24,810.67l-63.57,63.57l-213.34,-212.91v-33.7l-11.52,-11.95c-48.64,41.81 -111.79,66.99 -180.48,66.99c-153.17,0 -277.33,-124.17 -277.33,-277.34c0,-153.17 124.16,-277.33 277.33,-277.33c153.17,0 277.34,124.16 277.34,277.33c0,68.69 -25.18,131.84 -66.99,180.48l11.95,11.52h33.7zM597.33,405.33c0,-106.24 -85.76,-192 -192,-192c-106.24,0 -192,85.76 -192,192c0,106.24 85.76,192 192,192c106.24,0 192,-85.76 192,-192zM298.67,384h213.33v42.67h-213.33z"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 859 B

View File

@ -0,0 +1,6 @@
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0,0,1024,1024">
<desc>zoom_out_map icon - Licensed under Apache License v2.0 (http://www.apache.org/licenses/LICENSE-2.0) - Created with Iconfu.com - Derivative work of Material icons (Copyright Google Inc.)</desc>
<g fill="#03b8e5" fill-rule="nonzero" style="mix-blend-mode: normal">
<path d="M896,896h-256l98.13,-98.13l-123.3,-122.46l60.58,-60.58l122.46,123.3l98.13,-98.13zM896,128v256l-98.13,-98.13l-122.46,123.3l-60.58,-60.58l123.3,-122.46l-98.13,-98.13zM128,896v-256l98.13,98.13l122.46,-123.3l60.58,60.58l-123.3,122.46l98.13,98.13zM128,128h256l-98.13,98.13l123.3,122.46l-60.58,60.58l-122.46,-123.3l-98.13,98.13z"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 742 B