Uploaded image for project: 'Qt'
  1. Qt
  2. QTBUG-107989

Aliasing occurs at the image boundary if add Scale Animator to nine-patch image

    XMLWordPrintable

Details

    • 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;
           } 

      Attachments

        1. foo-9-renderdoc-mesh.png
          5 kB
          Mitch Curtis
        2. patchNodeImage.png
          0.2 kB
          Mitch Curtis
        3. ninePatchImageGrab-upscaled.png
          4 kB
          Mitch Curtis
        4. generatedImage.png
          0.2 kB
          Mitch Curtis
        5. ninePatchImageGrab.png
          0.2 kB
          Mitch Curtis
        6. card.9.png
          1.0 kB
          Jongho Kim
        7. Screenshot from 2022-10-26 13-34-36.png
          53 kB
          Jongho Kim
        8. 0001-Improve-the-aliasing-issue-at-boundary-when-applying.patch
          1 kB
          Jongho Kim
        No reviews matched the request. Check your Options in the drop-down menu of this sections header.

        Activity

          People

            mitch_curtis Mitch Curtis
            jonghokim Jongho Kim
            Votes:
            0 Vote for this issue
            Watchers:
            9 Start watching this issue

            Dates

              Created:
              Updated:
              Resolved:

              Gerrit Reviews

                There are no open Gerrit changes