Details
-
Bug
-
Resolution: Done
-
P2: Important
-
6.2.2
-
2b258e019e (qt/qtdeclarative/6.4) 649151bdcc (qt/qtdeclarative/dev) 649151bdcc (qt/qtdeclarative/wip/material3) 2b258e019e (qt/tqtc-qtdeclarative/6.4) 649151bdcc (qt/tqtc-qtdeclarative/dev), 361d4bdf5 (tqtc/lts-6.2)
Description
Aliasing occurs at the image boundary if add Scale Animator to nine-patch image. as I know, the same issue occurs in all Qt versions.
- Test Codes
import QtQuick import QtQuick.Controls.Imagine import QtQuick.Controls.Imagine.impl Window { width: 1920 height: 1080 visible: true title: qsTr("Hello World") color: "black" Row { spacing: 100 anchors.centerIn: parent Column { id: layout spacing: 30 NinePatchImage { id: widget width: 321 height: 400 source: "file:///home/jongho/ninePatchTest/card.9.png" } ScaleAnimator { id: widgetScaleAnim target: widget from: 1 to: 1.1 duration: 5000 easing.type: Easing.InOutQuint } ParallelAnimation { id: propertyAnim NumberAnimation { target: widget; property: "width"; to: 353; duration: 5000; easing.type: Easing.InOutQuint } NumberAnimation { target: widget; property: "height"; to: 440; duration: 5000; easing.type: Easing.InOutQuint } } } Column { id: layout2 spacing: 30 Button { width: 400 height: 115 text: "RunScaleAnimator" font.pixelSize: 32 onClicked: { widgetScaleAnim.from = 1 widgetScaleAnim.to = 1.1 widgetScaleAnim.running = true } } Button { width: 400 height: 115 text: "RestoreScaleAnimator" font.pixelSize: 32 onClicked: { widgetScaleAnim.running = false widgetScaleAnim.from = 1.1 widgetScaleAnim.to = 1 widgetScaleAnim.running = true } } Button { width: 400 height: 115 text: "RunPropertyAnimator" font.pixelSize: 32 onClicked: { propertyAnim.running = true } } Button { width: 400 height: 115 text: "RestorePropertyAnimator" font.pixelSize: 32 onClicked: { propertyAnim.running = false widget.width = 321 widget.height = 400 } } } } }
- Steps to reproduce this issue
- Press any button on the right. And if you look at the image on the upper left or lower right, you can find that the aliasing appears. refer to below
- Our solution
- I solved it by applying a filter in a similar way to borderImage. Please improve the Qt upstream after reviewing it.
- 0001-Improve-the-aliasing-issue-at-boundary-when-applying.patch
diff --git a/src/quickcontrols2/imagine/impl/qquickninepatchimage.cpp b/src/quickcontrols2/imagine/impl/qquickninepatchimage.cpp index 66404ba4cd..7d82ca8178 100644 --- a/src/quickcontrols2/imagine/impl/qquickninepatchimage.cpp +++ b/src/quickcontrols2/imagine/impl/qquickninepatchimage.cpp @@ -463,6 +463,8 @@ QSGNode *QQuickNinePatchImage::updatePaintNode(QSGNode *oldNode, UpdatePaintNode QSGTexture *texture = window()->createTextureFromImage(image); patchNode->initialize(texture, sz * d->devicePixelRatio, image.size(), d->xDivs, d->yDivs, d->devicePixelRatio); + static_cast<QSGTextureMaterial *>(patchNode->material()) + ->setFiltering(d->smooth ? QSGTexture::Linear : QSGTexture::Nearest); return patchNode; }