Fix UI border artifacts caused by incorrect blending

[floppyhammer]

trafficstars

Fixes https://github.com/bevyengine/bevy/issues/12702.

[chompaa]

I'm not sure if this fix works, take the button example with a black background:

Before (main)

After (this PR)

I don't think these artifacts are desired.

[asafigan]

This solves my artifacts.

before

after

[floppyhammer]

I'm not sure if this fix works, take the button example with a black background:

Before (main) After (this PR) I don't think these artifacts are desired.

These artifacts are actually from the underlaying button image:

Before

After

This PR only makes them more obvious. I believe this is another issue we need to deal with (which may need a separate PR). I'll take a look.

[floppyhammer]

The artifacts brought up by @chompaa are due to how we draw borders. Given a rect, we extend the rect edge inwards to make the border, which has the exact same external edge as the rect (which we use to draw UiImage). We will have blending issue between the border and the UiImage background near these anti-aliased edges.

A possible solution to this is not to draw the UiImage in the full rect but in a smaller rect (which depends on the border width). This may require some changes to the prepare_uinodes function.

Anyways, this is a separate issue. And, with some further tests, this PR is good to go.

[asafigan]

Is there anything I can do to move this along? Like working on tests?

[floppyhammer]

@asafigan I'm not sure. We may need to run all the UI related examples to make sure this isn't causing other issues.