Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Rotating a fontawesome icon #4460

Closed
MMirbach opened this issue Aug 22, 2021 · 3 comments
Closed

Rotating a fontawesome icon #4460

MMirbach opened this issue Aug 22, 2021 · 3 comments

Comments

@MMirbach
Copy link

Hello,
I'm working with fontawesome icon through imgui and was wondering if there is any way to rotate an icon.
Fontawesome themselves have that option but using CSS and I am using imgui and c++.

@AidanSun05
Copy link

AidanSun05 commented Aug 22, 2021

Short answer: Yes, this can be done, but it requires some extra work. See #1286 and its demo code.

Long answer: There have been plans to support rotated text (#705, #3032):
(March 22, 2020)

We will aim to support full-featured rotated text in a new low-level text rendering API this year.

Not sure if this is still going, so for now, rotated text rendering is left entirely to the user.

All the examples and demos I'm providing use the ImDrawList API. (If you don't want to use this API for whatever reason you can look at this comment which describes using ImFont::RenderChar()/ImFont::RenderText(), but this limits your rotation to 90 degrees.)

Rotation in 90-degree increments is usually easier to handle since everything is straight up and down.
From #422:
(December 2, 2015)

There's no easy way right now. The code in ImFont::RenderText is fairly optimized for left-to-right and cpu-side clipping for axis aligned so it wouldn't be a trivial fit without altering performance.

(June 16, 2016)

Could you clarify if you are interested in 90 degrees rotated vertical text or arbitrary rotation as implied above? I should have asked the question but the problem are different. 90 degrees rotations are easier to do (lighter CPU-side clipping of polygons, etc.).

And from #705:
(June 19, 2016)

There was a request for rotated text which I always assumed was arbitrary-rotated text, but 90-degrees text is a little easier to handle.

If 90-degree rotation is what you want, you'll find #705 and #3032 helpful. If you want any arbitrary rotation, take a look at #1286, though as mentioned above, non-90-degree angles are harder to manage (its demo code has a very crude clipping calculation system compared to the other examples I provided, along with the following known items):

  • no changes to the internals,
  • clipping remains untouched, therefore
  • not the expected behavior for vertical labels,
  • mouse interaction e.g. slider dragging is broken.
  • Though a huge fan of dear imgui, I don't yet feel how the draw lists are juggled around and when would it break? Is this a good approach or maybe there's some better way to calculate the center or update clip rect after rotation?

Another idea: since it only affects the drawing output, draw lists could embed a projection matrix stack and move it to the render function - currently only a single screen projection matrix is set per frame in D3D11. Bloat ahead.


So to sum up, here's a list of all the demo code I found:
#705 (comment), #3032 (comment): 90-degree text in one direction only, no clipping. Code is fairly short.
#705 (comment): 90-degree text in one direction only, no clipping (?), supports colors. Code is a little longer.
#705 (comment): 90-degree text in two directions, full-featured clipping. Code is the longest out of all these examples.
#1286 (comment): Full-featured rotation (even includes an icon font in the GIF!), minimal clipping, a little harder to manage, though the code is pretty short.

@mnesarco
Copy link

You can also generate your own font based on FontAwesome (or any other) SVG icons using this little tool: https://github.com/mnesarco/ff-batch

@MMirbach
Copy link
Author

Thank you both :)

@ocornut ocornut closed this as completed Aug 31, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

4 participants