Blend small image over larger image
-
I have a 3840×720 background image (a static map) with many small images (e.g. 86×86) positioned overtop, highlighting specific buildings. These small images dynamically show and hide. I'd like to screen blend these images when displayed.
If I fill the Blend to the background, then the tiny highlight image is scaled to fill the entire map:
Image { source: 'images/map-bg' Image { id:highlight-a; source:'images/highlight-a'; x:1230; y:470; visible:false } Blend { anchors.fill:parent; source:parent; foregroundSource:highlight-a; mode:'screen' } }
If I instead fit the Blend to the highlight image, then a full copy of the background map is scaled down to fit the size of the highlight image:
Image { source: 'images/map-bg' Image { id:highlight-a; source:'images/highlight-a'; x:1230; y:470; visible:false } Blend { anchors.fill:highlight-a; source:parent; foregroundSource:highlight-a; mode:'screen' } }
Is there a way to have the Blend effect read the region of the source image that the foreground is over, and only use that?
The only workarounds I can think of are to either (a) make a 3840×720 with all items in it and blend that huge (mostly empty) image, wasting perf, or (b) use item layers with a custom shader for screen blend mode, with some code (that I don't know how to write) that would calculate and sample just the region I want for the underlying image.
This seems to be intimately related to this StackOverflow question I wrote up when I ran into a similar problem last year. That question remains unanswered.
-
Does this help?
http://doc.qt.io/qt-5/qtwidgets-painting-imagecomposition-example.html[edit]also maybe useful too http://doc.qt.io/qt-5/qpainter.html#CompositionMode-enum
-
Sorry, my bad. I didn't realize Blend was not yours. And. Wow, that Blend is pretty neat...
I'm not sure how really in QML, but I know I load QPixMaps and that has scaled, which I use for my Splash... while I was doing that I did notice ::copy ... what about generating a QPixmap of the region you require to blend, blend with that and overlay? If I understand correctly...
To get into QML, maybe use a QQuickImageProvider or https://forum.qt.io/topic/69209/how-to-display-a-qpixmap-qimage-in-qml/4 -- this bit I've not needed / tested or used.
In c++ this clips 500*500 for me...
const QImage image(":/images/image.png"); // imageQPainter::SmoothPixmapTransform QPixmap pixmap = QPixmap::fromImage(image); //.scaled(QSize(300,300) // ,Qt::AspectRatioMode::KeepAspectRatio // ,Qt::SmoothTransformation); const auto rect = QRect(0,0, 500, 500); const QPixmap pixmapCopy = pixmap.copy(rect);
I don't use copy, I use the commented out scaled to reduce from a 3k * 3k source myself, that's just for my splash screen, used like:
QSplashScreen *splash = new QSplashScreen(pixmap);
If I do
QSplashScreen *splash = new QSplashScreen(pixmapCopy);
I just get the first 500*500
If this isn't helping I can just shutup too... just figure no one else seems to. I can at least try?