How to draw an image or label XORed with the background inside LVGL?


I would like to show a progress bar that has a partial black and partial white background, on which it should display a label with the length text in meters. That text should be drawn in the opposite color of the background color.

What MCU/Processor/Board and compiler are you using?

STM32G473, IAR V8.50.4 Compiler

What LVGL version are you using?

Version 8.1

What do you want to achieve?

I would like to draw a horizontal length progress bar, that shows as completely black at the start of a machine procedure and gradually becomes more white when the measured length decreases.

The length text should always be visible inside that progress bar, regardless of the progress background.
The text is usually drawn in black when on a white background, but should be white when drawn on a black background.

In the past I would have done compositing of a such a text over a changing background by using an XOR copy of the label text over the progress bar background.

What have you tried so far?

I have code to draw the progress bar and I can draw a textlabel, but haven’t found out how to draw the text on top of that progress bar so that it will be the inverse color of the progress bar.

Is there a way to do an XOR copy of one canvas into another canvas ?

Screenshot and/or video

This is the effect I am trying to accomplish. The background could change from black to white halfway under a letter and that should also be shown correctly.