Hide Rectangle Behind Transparent Rectangle

Redman

Hi,

I have a background image with some electrical components.
The background image provides the gray and brown rectangle.
Some of the components overlap on this background image.

Now I am setting a border width on some rectangles I drew over these background rectangle components to visualize warnings and errors.

In this case everything is fine. But if we reverse that, and let the component which is behind the other one have an error/warning while the front one has none it looks like this. (Which is to be expected, since the color of the rectangle that encircles the brown rectangle is actually "transparent" so we can see the background image)

Is there any way to achieve, that the component behind is actually really covered by the rectangle of the component in front but still let the brown part of the background image through? Like so:

SGaist

Hi,

How are you doing the rendering ? Using QLabel ? Painting things yourself ? Using the graphics view framework ?

jeremy_k

Based on the category, I'm presuming that the underlying graphic stack is Qt Quick.

This looks like something that should be possible with a ShaderEffect or OpacityMask applied to the warning display item.

The mask will need to know the geometry of the underlying shape that shouldn't be covered. For simple scenarios, I would think that it would be easier to break up the background into separate items and use Z-ordering.

Redman

@jeremy_k While I understand your suggestion I do not think I am able to implement it.
I have a factory inside qml that takes coordinate and dimensions of the rectangle which I want to overlay over the background. So these rectangles that overlap dont know of each others existense (they could, but whats the point of the factory and how do I approach this? The order in which the rectangles will be rendered can be changed etc etc). Since this background is prone to change (though, marginally) it is not feasable tomask the rectangle with lower z.

Is there any way to mask the rectangle with higher z to accomplish this?

Basically I have 3 layers.
1 - background
2 - low z rectangle
3 - high z rectangle

I want to mask 3, so 2 is not shown within mask 3 but 1 is shown. This seems kinda impossible without telling 2 what to do. Or am I wrong?

jeremy_k

@Redman said in Hide Rectangle Behind Transparent Rectangle:

@jeremy_k While I understand your suggestion I do not think I am able to implement it.
I have a factory inside qml that takes coordinate and dimensions of the rectangle which I want to overlay over the background. So these rectangles that overlap dont know of each others existense (they could, but whats the point of the factory and how do I approach this? The order in which the rectangles will be rendered can be changed etc etc). Since this background is prone to change (though, marginally) it is not feasable tomask the rectangle with lower z.

Is there any way to mask the rectangle with higher z to accomplish this?

Basically I have 3 layers.
1 - background
2 - low z rectangle
3 - high z rectangle

I want to mask 3, so 2 is not shown within mask 3 but 1 is shown. This seems kinda impossible without telling 2 what to do. Or am I wrong?

"Telling 2 what to do" matches my first suggestion, altering the opacity of the appropriate section to make it transparent. Perhaps a window compositor type abstraction to apply the opacity mask fits better with the existing code.

Another option to is have 3 replicate the portion of 1 that it covers, resulting in painting over the top of 2.

Rectangle {
  id: bottom
  color: "red"
  Rectangle {
    width: bottom.width / 2
    height: bottom.height
    color: "green"
    Rectangle {
      width: parent.width / 2
      height: parent.height / 2
      color: bottom.color
    }
  }
}

Depending on the source of the bottom layer, the top layer might use an Image, ShaderEffect, or something else entirely. A downside to this strategy is that everything that might be impacted must redraw its visible area, as opposed to calculating the impacted area and only redrawing there. This strategy also becomes more complicated if graphics from multiple layers need to be repeated.

Redman

@jeremy_k Thank you for your input. It seems I have to rethink the concept.