Forcing Blend to Update when Source Changes
-
I have a series of small images blended over a larger one. The small images may show or hide based on property changes in the app:
Image { source: 'images/map' anchors.fill: parent Item { id: highlights Image { source:'images/hi1'; x:100; y:200; visible:route.startLoc==1 || route.endLoc==1 } Image { source:'images/hi2'; x:150; y:100; visible:route.startLoc==2 || route.endLoc==2 } /* 13 images total */ visible: false } Blend { anchors.fill:parent; source:parent; foregroundSource:highlights; mode:'hardLight'; opacity:0.5 } }
If I turn off the blend (and make
highlights
visible), everything works as expected: when thestartLoc
orendLoc
properties change, the correct images show and hide. However, with the Blend in place, the behavior is erratic. Some of the images will turn off, but newly-visible images will not appear.I've tried using
cached:true
on theBlend
, with no effect. I've tried adding tweaks to the Blend properties to make it update, with no effect. (I've ensured that the connection is working viaconsole.log
, and even tried leaving the Blend in a different blend mode.)Blend { Component.onCompleted: { route.startLocChanged.connect(function(){ mode='normal'; mode='hardLight' }); route.endLocChanged.connect(function(){ mode='normal'; mode='hardLight' }); } }
How can I force Blend to notice when the Item changes due to images changing visibility?
-
I solved the problem by changing the property controlling the image code from using
visibile
to usingopacity
. I'm not sure whyvisible
was not properly dirtying the Item, butopacity
works fine.So, instead of this…
Image { source:'images/hi1'; x:100; y:200; visible:route.startLoc==1 || route.endLoc==1 }
…I'm using this:
Image { source:'images/hi1'; x:100; y:200; opacity:route.startLoc==1 || route.endLoc==1 ? 1 : 0 }