From a5b6b744b5a06bcd8dc101768466d202f427b2e7 Mon Sep 17 00:00:00 2001 From: Yann Bodson Date: Thu, 6 Aug 2009 18:31:37 +1000 Subject: Add support for CSS-like horizontalTileRule and verticalTileRule to ScaleGrid. * Simplify and improve QFxImage code by using qDrawBorderPixmap * Add horizontalTileRule and verticalTileRule to .sci files * Add example in example/declarative/border-image --- examples/declarative/border-image/BorderImage.qml | 36 +++++++++++++ examples/declarative/border-image/animated.qml | 54 +++++++++++++++++++ examples/declarative/border-image/borders.qml | 18 +++++++ examples/declarative/border-image/bw.png | Bin 0 -> 1357 bytes examples/declarative/border-image/colors-round.sci | 7 +++ .../declarative/border-image/colors-stretch.sci | 5 ++ examples/declarative/border-image/colors.png | Bin 0 -> 1809 bytes src/declarative/fx/qfximage.cpp | 60 +++------------------ src/declarative/fx/qfxscalegrid.cpp | 43 ++++++++++++--- src/declarative/fx/qfxscalegrid_p.h | 21 ++++++++ 10 files changed, 183 insertions(+), 61 deletions(-) create mode 100644 examples/declarative/border-image/BorderImage.qml create mode 100644 examples/declarative/border-image/animated.qml create mode 100644 examples/declarative/border-image/borders.qml create mode 100644 examples/declarative/border-image/bw.png create mode 100644 examples/declarative/border-image/colors-round.sci create mode 100644 examples/declarative/border-image/colors-stretch.sci create mode 100644 examples/declarative/border-image/colors.png diff --git a/examples/declarative/border-image/BorderImage.qml b/examples/declarative/border-image/BorderImage.qml new file mode 100644 index 0000000..a809d5d --- /dev/null +++ b/examples/declarative/border-image/BorderImage.qml @@ -0,0 +1,36 @@ +import Qt 4.6 + +Item { + property var horizontalMode : "Stretch" + property var verticalMode : "Stretch" + property string source + property int minWidth + property int minHeight + property int maxWidth + property int maxHeight + property int margin + + id: Container + width: 240; height: 240 + Image { + x: Container.width / 2 - width / 2 + y: Container.height / 2 - height / 2 + width: SequentialAnimation { + running: true; repeat: true + NumberAnimation { from: Container.minWidth; to: Container.maxWidth; duration: 2000; easing: "easeInOutQuad"} + NumberAnimation { from: Container.maxWidth; to: Container.minWidth; duration: 2000; easing: "easeInOutQuad" } + } + height: SequentialAnimation { + running: true; repeat: true + NumberAnimation { from: Container.minHeight; to: Container.maxHeight; duration: 2000; easing: "easeInOutQuad"} + NumberAnimation { from: Container.maxHeight; to: Container.minHeight; duration: 2000; easing: "easeInOutQuad" } + } + source: Container.source + scaleGrid.horizontalTileRule: Container.horizontalMode + scaleGrid.verticalTileRule: Container.verticalMode + scaleGrid.top: Container.margin + scaleGrid.left: Container.margin + scaleGrid.bottom: Container.margin + scaleGrid.right: Container.margin + } +} diff --git a/examples/declarative/border-image/animated.qml b/examples/declarative/border-image/animated.qml new file mode 100644 index 0000000..58eb44c --- /dev/null +++ b/examples/declarative/border-image/animated.qml @@ -0,0 +1,54 @@ +import Qt 4.6 + +Rect { + id: Page + color: "white" + width: 1030; height: 540 + + BorderImage { + x: 20; y: 20; minWidth: 120; maxWidth: 240 + minHeight: 120; maxHeight: 240 + source: "colors.png"; margin: 30 + } + BorderImage { + x: 270; y: 20; minWidth: 120; maxWidth: 240 + minHeight: 120; maxHeight: 240 + source: "colors.png"; margin: 30 + horizontalMode: "Repeat"; verticalMode: "Repeat" + } + BorderImage { + x: 520; y: 20; minWidth: 120; maxWidth: 240 + minHeight: 120; maxHeight: 240 + source: "colors.png"; margin: 30 + horizontalMode: "Stretch"; verticalMode: "Repeat" + } + BorderImage { + x: 770; y: 20; minWidth: 120; maxWidth: 240 + minHeight: 120; maxHeight: 240 + source: "colors.png"; margin: 30 + horizontalMode: "Round"; verticalMode: "Round" + } + BorderImage { + x: 20; y: 280; minWidth: 60; maxWidth: 200 + minHeight: 40; maxHeight: 200 + source: "bw.png"; margin: 10 + } + BorderImage { + x: 270; y: 280; minWidth: 60; maxWidth: 200 + minHeight: 40; maxHeight: 200 + source: "bw.png"; margin: 10 + horizontalMode: "Repeat"; verticalMode: "Repeat" + } + BorderImage { + x: 520; y: 280; minWidth: 60; maxWidth: 200 + minHeight: 40; maxHeight: 200 + source: "bw.png"; margin: 10 + horizontalMode: "Stretch"; verticalMode: "Repeat" + } + BorderImage { + x: 770; y: 280; minWidth: 60; maxWidth: 200 + minHeight: 40; maxHeight: 200 + source: "bw.png"; margin: 10 + horizontalMode: "Round"; verticalMode: "Round" + } +} diff --git a/examples/declarative/border-image/borders.qml b/examples/declarative/border-image/borders.qml new file mode 100644 index 0000000..a4a329b --- /dev/null +++ b/examples/declarative/border-image/borders.qml @@ -0,0 +1,18 @@ +import Qt 4.6 + +Rect { + id: Page + color: "white" + width: 520; height: 280 + + Image { + x: 20; y: 20; width: 230; height: 240 + smooth: true + source: "colors-stretch.sci" + } + Image { + x: 270; y: 20; width: 230; height: 240 + smooth: true + source: "colors-round.sci" + } +} diff --git a/examples/declarative/border-image/bw.png b/examples/declarative/border-image/bw.png new file mode 100644 index 0000000..486eaae Binary files /dev/null and b/examples/declarative/border-image/bw.png differ diff --git a/examples/declarative/border-image/colors-round.sci b/examples/declarative/border-image/colors-round.sci new file mode 100644 index 0000000..3784e10 --- /dev/null +++ b/examples/declarative/border-image/colors-round.sci @@ -0,0 +1,7 @@ +gridLeft:30 +gridTop:30 +gridRight:30 +gridBottom:30 +horizontalTileRule:Round +verticalTileRule:Round +imageFile:colors.png diff --git a/examples/declarative/border-image/colors-stretch.sci b/examples/declarative/border-image/colors-stretch.sci new file mode 100644 index 0000000..c693599 --- /dev/null +++ b/examples/declarative/border-image/colors-stretch.sci @@ -0,0 +1,5 @@ +gridLeft:30 +gridTop:30 +gridRight:30 +gridBottom:30 +imageFile:colors.png diff --git a/examples/declarative/border-image/colors.png b/examples/declarative/border-image/colors.png new file mode 100644 index 0000000..c0e137c Binary files /dev/null and b/examples/declarative/border-image/colors.png differ diff --git a/src/declarative/fx/qfximage.cpp b/src/declarative/fx/qfximage.cpp index ec3053c..792b015 100644 --- a/src/declarative/fx/qfximage.cpp +++ b/src/declarative/fx/qfximage.cpp @@ -348,60 +348,10 @@ void QFxImage::paint(QPainter *p, const QStyleOptionGraphicsItem *, QWidget *) p->drawPixmap(0, 0, pix); } } else { - if (d->fillMode != Stretch) - qWarning("Only fillmode:Stretch supported for scale grid images"); - int sgl = d->scaleGrid->left(); - int sgr = d->scaleGrid->right(); - int sgt = d->scaleGrid->top(); - int sgb = d->scaleGrid->bottom(); - - int w = width(); - int h = height(); - if (sgt + sgb > h) - sgt = sgb = h/2; - if (sgl + sgr > w) - sgl = sgr = w/2; - - const int xSide = sgl + sgr; - const int ySide = sgt + sgb; - - // Upper left - if (sgt && sgl) - p->drawPixmap(QRect(0, 0, sgl, sgt), pix, QRect(0, 0, sgl, sgt)); - // Upper middle - if (pix.width() - xSide && sgt) - p->drawPixmap(QRect(sgl, 0, w - xSide, sgt), pix, - QRect(sgl, 0, pix.width() - xSide, sgt)); - // Upper right - if (sgt && pix.width() - sgr) - p->drawPixmap(QPoint(w-sgr, 0), pix, - QRect(pix.width()-sgr, 0, sgr, sgt)); - // Middle left - if (sgl && pix.height() - ySide) - p->drawPixmap(QRect(0, sgt, sgl, h - ySide), pix, - QRect(0, sgt, sgl, pix.height() - ySide)); - - // Middle - if (pix.width() - xSide && pix.height() - ySide) - p->drawPixmap(QRect(sgl, sgt, w - xSide, h - ySide), - pix, - QRect(sgl, sgt, pix.width() - xSide, pix.height() - ySide)); - // Middle right - if (sgr && pix.height() - ySide) - p->drawPixmap(QRect(w-sgr, sgt, sgr, h - ySide), pix, - QRect(pix.width()-sgr, sgt, sgr, pix.height() - ySide)); - // Lower left - if (sgl && sgr) - p->drawPixmap(QPoint(0, h - sgb), pix, - QRect(0, pix.height() - sgb, sgl, sgb)); - // Lower Middle - if (pix.width() - xSide && sgb) - p->drawPixmap(QRect(sgl, h - sgb, w - xSide, sgb), pix, - QRect(sgl, pix.height() - sgb, pix.width() - xSide, sgb)); - // Lower Right - if (sgr && sgb) - p->drawPixmap(QPoint(w-sgr, h - sgb), pix, - QRect(pix.width()-sgr, pix.height() - sgb, sgr, sgb)); + QMargins margins(d->scaleGrid->top(), d->scaleGrid->left(), d->scaleGrid->bottom(), d->scaleGrid->right()); + QTileRules rules((Qt::TileRule)d->scaleGrid->horizontalTileRule(), + (Qt::TileRule)d->scaleGrid->verticalTileRule()); + qDrawBorderPixmap(p, QRect(0, 0, (int)d->width, (int)d->height), margins, pix, pix.rect(), margins, rules); } if (d->smooth) { @@ -612,6 +562,8 @@ void QFxImage::setGridScaledImage(const QFxGridScaledImage& sci) sg->setBottom(sci.gridBottom()); sg->setLeft(sci.gridLeft()); sg->setRight(sci.gridRight()); + sg->setHorizontalTileRule(sci.horizontalTileRule()); + sg->setVerticalTileRule(sci.verticalTileRule()); d->sciurl = d->url.resolved(QUrl(sci.pixmapUrl())); d->reply = QFxPixmap::get(qmlEngine(this), d->sciurl, this, SLOT(requestFinished())); diff --git a/src/declarative/fx/qfxscalegrid.cpp b/src/declarative/fx/qfxscalegrid.cpp index 74ef0a1..198ac6d 100644 --- a/src/declarative/fx/qfxscalegrid.cpp +++ b/src/declarative/fx/qfxscalegrid.cpp @@ -73,7 +73,8 @@ QT_BEGIN_NAMESPACE */ QML_DEFINE_NOCREATE_TYPE(QFxScaleGrid) -QFxScaleGrid::QFxScaleGrid() : QObject(), _left(0), _top(0), _right(0), _bottom(0) +QFxScaleGrid::QFxScaleGrid() : QObject(), _left(0), _top(0), _right(0), _bottom(0), + _horizontalTileRule(Stretch), _verticalTileRule(Stretch) { } @@ -122,13 +123,25 @@ void QFxScaleGrid::setBottom(int pos) _bottom = pos; } +void QFxScaleGrid::setHorizontalTileRule(TileRule r) +{ + _horizontalTileRule = r; +} + +void QFxScaleGrid::setVerticalTileRule(TileRule r) +{ + _verticalTileRule = r; +} + + QFxGridScaledImage::QFxGridScaledImage() -: _l(-1), _r(-1), _t(-1), _b(-1) +: _l(-1), _r(-1), _t(-1), _b(-1), + _h(QFxScaleGrid::Stretch), _v(QFxScaleGrid::Stretch) { } QFxGridScaledImage::QFxGridScaledImage(const QFxGridScaledImage &o) -: _l(o._l), _r(o._r), _t(o._t), _b(o._b), _pix(o._pix) +: _l(o._l), _r(o._r), _t(o._t), _b(o._b), _h(o._h), _v(o._v), _pix(o._pix) { } @@ -138,22 +151,24 @@ QFxGridScaledImage &QFxGridScaledImage::operator=(const QFxGridScaledImage &o) _r = o._r; _t = o._t; _b = o._b; + _h = o._h; + _v = o._v; _pix = o._pix; return *this; } QFxGridScaledImage::QFxGridScaledImage(QIODevice *data) -: _l(-1), _r(-1), _t(-1), _b(-1) +: _l(-1), _r(-1), _t(-1), _b(-1), _h(QFxScaleGrid::Stretch), _v(QFxScaleGrid::Stretch) { int l = -1; - int r = -1; - int t = -1; + int r = -1; + int t = -1; int b = -1; QString imgFile; while(!data->atEnd()) { QString line = QString::fromUtf8(data->readLine().trimmed()); - if (line.isEmpty() || line.startsWith(QLatin1String("#"))) + if (line.isEmpty() || line.startsWith(QLatin1String("#"))) continue; QStringList list = line.split(QLatin1Char(':')); @@ -173,6 +188,10 @@ QFxGridScaledImage::QFxGridScaledImage(QIODevice *data) b = list[1].toInt(); else if (list[0] == QLatin1String("imageFile")) imgFile = list[1]; + else if (list[0] == QLatin1String("horizontalTileRule")) + _h = stringToRule(list[1]); + else if (list[0] == QLatin1String("verticalTileRule")) + _v = stringToRule(list[1]); } if (l < 0 || r < 0 || t < 0 || b < 0 || imgFile.isEmpty()) @@ -183,6 +202,16 @@ QFxGridScaledImage::QFxGridScaledImage(QIODevice *data) _pix = imgFile; } +QFxScaleGrid::TileRule QFxGridScaledImage::stringToRule(const QString &s) const +{ + if (s == QLatin1String("Stretch")) + return QFxScaleGrid::Stretch; + if (s == QLatin1String("Repeat")) + return QFxScaleGrid::Repeat; + if (s == QLatin1String("Round")) + return QFxScaleGrid::Round; +} + bool QFxGridScaledImage::isValid() const { return _l >= 0; diff --git a/src/declarative/fx/qfxscalegrid_p.h b/src/declarative/fx/qfxscalegrid_p.h index 986bcda..a8df3c1 100644 --- a/src/declarative/fx/qfxscalegrid_p.h +++ b/src/declarative/fx/qfxscalegrid_p.h @@ -57,11 +57,15 @@ QT_MODULE(Declarative) class Q_DECLARATIVE_EXPORT QFxScaleGrid : public QObject { Q_OBJECT + Q_ENUMS(TileRule) Q_PROPERTY(int left READ left WRITE setLeft) Q_PROPERTY(int top READ top WRITE setTop) Q_PROPERTY(int right READ right WRITE setRight) Q_PROPERTY(int bottom READ bottom WRITE setBottom) + Q_PROPERTY(TileRule horizontalTileRule READ horizontalTileRule WRITE setHorizontalTileRule) + Q_PROPERTY(TileRule verticalTileRule READ verticalTileRule WRITE setVerticalTileRule) + public: QFxScaleGrid(); ~QFxScaleGrid(); @@ -80,11 +84,21 @@ public: int bottom() const { return _bottom; } void setBottom(int); + enum TileRule { Stretch = Qt::Stretch, Repeat = Qt::Repeat, Round = Qt::Round }; + + TileRule horizontalTileRule() const { return _horizontalTileRule; } + void setHorizontalTileRule(TileRule); + + TileRule verticalTileRule() const { return _verticalTileRule; } + void setVerticalTileRule(TileRule); + private: int _left; int _top; int _right; int _bottom; + TileRule _horizontalTileRule; + TileRule _verticalTileRule; }; class Q_DECLARATIVE_EXPORT QFxGridScaledImage @@ -99,14 +113,21 @@ public: int gridRight() const; int gridTop() const; int gridBottom() const; + QFxScaleGrid::TileRule horizontalTileRule() const { return _h; } + QFxScaleGrid::TileRule verticalTileRule() const { return _v; } QString pixmapUrl() const; private: + QFxScaleGrid::TileRule stringToRule(const QString &) const; + +private: int _l; int _r; int _t; int _b; + QFxScaleGrid::TileRule _h; + QFxScaleGrid::TileRule _v; QString _pix; }; -- cgit v0.12