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

Using a @2x image with BorderImage displays incorrectly on 5.12.0

    XMLWordPrintable

Details

    • Bug
    • Resolution: Done
    • P1: Critical
    • 5.12.1
    • 5.12.0
    • None
    • macOS 10.14, Ubuntu 16.04, Windows 7, and iOS 11.3.1
    • All

    Description

      On Qt 5.11.2, I could use a HiDPI (2x) image on a BorderImage, and it would scale exactly how I would expect it to. On 5.12.0, this isn't the case. Instead, the bottom segment of the image scales correctly, but the top segment appears to be really squished on both the left and the right side. I've tried many combinations of "source" and "border" properties on the BorderImage element, and I've built my software on different operating systems, but this problem still persists. Standard DPI (1x) images aren't affected by this bug.

      I currently can only use Qt 5.11.2 for my software, because I rely on pre-rendered nine-patch BorderImages for many custom controls I've made. Using only standard DPI images isn't an option, because my controls would then look pixelated on HiDPI displays.

      Check the attachments for an example of this problem with an image I'm using for the background of buttons.

      It's worth noting that this can be worked around by using a ShaderEffect and BorderImageMesh in front of an Image element, with the "size" property set manually to the size of the standard DPI variant of the image. Using three elements shouldn't be necessary to get this working on 5.12.0 though, and I previously didn't have to specify the image's size manually. Here's the code I'm using temporarily for 5.12.0 projects.

       

      Item {
      	id: prerenderedImage
      	
      	property size size
      	property string source
      	property real topInset: 0
      	property real leftInset: 0
      	property real bottomInset: 0
      	property real rightInset: 0
      	
      	Image {
      		id: image
      		
      		smooth: false
      		source: prerenderedImage.source
      		visible: false
      		
      		anchors.fill: parent
      	}
      	
      	ShaderEffect {
      		property var source: image
      		
      		mesh: BorderImageMesh {
      			border {
      				top: prerenderedImage.topInset
      				left: prerenderedImage.leftInset
      				bottom: prerenderedImage.bottomInset
      				right: prerenderedImage.rightInset
      			}
      			
      			size: prerenderedImage.size
      		}
      		
      		anchors.fill: parent
      	}
      }

       

      Attachments

        1. 5.11.2.png
          5.11.2.png
          7 kB
        2. 5.12.0.png
          5.12.0.png
          7 kB

        Issue Links

          For Gerrit Dashboard: QTBUG-72603
          # Subject Branch Project Status CR V

          Activity

            People

              allan.jensen Allan Sandfeld Jensen
              toxiccaves T C
              Votes:
              0 Vote for this issue
              Watchers:
              5 Start watching this issue

              Dates

                Created:
                Updated:
                Resolved:

                Gerrit Reviews

                  There are no open Gerrit changes