[rshapes] Fix pixel offset issue with line drawing

[Bigfoot71]

I propose here a fix for DrawRectangleRoundedLinesEx as discussed in this issue: #4601.

The method used to calculate the points corresponds to this in pseudocode:

vec2 tl = coord + 0.5
vec2 br = coord + size - 0.5

I was only able to test it on the following configurations:

• NVIDIA GTX 980

  • Driver: 550.120
  • System: Linux Mint 21.3

• NVIDIA Quadro NVS 160M

  • Driver: 340.108
  • System: Linux Mint 21.3

It would be nice to be able to test it on AMD and Intel hardware.

---

The same approach can also be applied to DrawRectangleLines.

However, as demonstrated in the issue linked above, this function applies an offset using zoomFactor, which causes other alignment issues and leads to incorrect rendering.

To obtain correct results with a scale of (1, 1) for DrawRectangleLines, it is currently necessary to eliminate the addition and subtraction of zoomFactor and follow the method described above.

Nevertheless, I have conducted several tests to address the offset with "non-identity" scaling, but, strangely, I have not yet achieved any convincing results.

---

Additional note: The current application of the zoomFactor offset in DrawRectangleLines only considers matView.m0, but shouldn’t it also take matView.m5 into account for non-uniform scaling?

---

I would like to gather opinions on the question of DrawRectangleLines before completing this draft.

[raysan5]

@Bigfoot71 thanks for the review! I tested on my laptop, on Windows 10, with Intel integrated and NVIDIA cards, including the Web build. Everything seems to work ok... still, should be picked with a grain of salt: Raspberry Pi, Android, DRM, macOS... too many GPU drivers doing magic...

About DrawRectangleLines(), I never liked the zoomFactor approach... too much math involved...

EDIT: Just realized that DrawRectangleRoundedLines() actually creates a 1px-border bigger rectangle than requested one, but I imagine this is the better approach to be used in conjuction with DrawRectangleRounded().

[raysan5]

Maybe with this nice improvement it's about time to consider rounded controls for raygui? 🤔

[Bigfoot71]

I realized that I had made small errors, which I have just corrected.

The current version seems to work for any given positions and dimensions, including those with decimal parts.

I also tried many different approaches to solve the issue of line overlap with the underlying shape mentioned by Kaehvaman, but without success.

Here’s an example:

These issues stem from the rendering of the semicircles and seem very difficult to fix.

What ultimately seemed the most logical to me was to start a fix in the loop calling sin/cos for rendering the semicircles, but my attempts were starting to become far too complex to be taken seriously...

The current proposal therefore draws the straight lines on the sides with one less pixel at each end to leave a one-pixel margin for the semicircles and allow them to be drawn with one extra pixel around the shape, avoiding overlap between the lines.

As you mentioned, @raysan5, the lines are indeed drawn with one extra pixel around the shape, so even if this were corrected, we would still see pixels from the shape visible outside the lines, in the current version, at least..

I believe the current version is the most optimal for now.

---

About DrawRectangleLines(), I never liked the zoomFactor approach... too much math involved...

This should still be easily adjustable, if not for this additional offset issue...

I won’t deny that this problem is giving quite a workout to a lot of neurons...

[raysan5]

@Bigfoot71 Looks great, really, let me when ready for merge.

Also, feel free to send a PR for DrawRectangleLines(), in any case current "solution" could be commented and explained, instead of just being removed, to keep a reference for all the fixes that have been tried along the years...

[Bigfoot71]

I just wanted to test it on Android, here’s the setup:

> Vendor:   Imagination Technologies  
> Renderer: PowerVR Rogue GE8320  
> Version:  OpenGL ES 3.2 build 1.11@5425693  
> GLSL:     OpenGL ES GLSL ES 3.20 build 1.11@5425693  

The result is fine:

With transparency, however, on Android, it's interesting to note that two lines seem to overlap at their ends on the semicircle at the top right, and the overlap with the shape is not the same as on PC.

Android:

PC:

So, here we have indeed factual proof that the behavior can changes depending on the hardware.

However, in both cases, without transparency, the result seems fine and should be for the vast majority of cases.

---

@raysan5 You can merge if that suits you!

[raysan5]

@Bigfoot71 Great improvement! Thanks! 👍🙂