Lazarus

Programming => Graphics and Multimedia => Graphics => Topic started by: Alextp on October 14, 2017, 02:14:57 pm

Title: Example for rounded/smooth UI tabs
Post by: Alextp on October 14, 2017, 02:14:57 pm
Thunderbird app has nice rounded tabs. rounded top edge of tab and rounder bottom. with smooth lines.
To paint such tabs, one can use AGGPas.
I want to paint such tabs in lite weight code, ATtabs, without AGGPas.

Sublime Text does it with PNG files. It has 2-3 files per left/right edge of tab.
I cannot get how Sublime does it.
a) custom width for tabs,
b) custom fore-, back- colors.

pls help with example, which paints such tabs? with PNG files or not.
Title: Re: Example for rounded/smooth UI tabs
Post by: taazz on October 14, 2017, 03:07:54 pm
there you go a quick and dirty editor for a single bezier based tab. for antialised drawing on QT set the antialized property of the the canvas to true, on windows use GDI+ or gtk use QT on macosX dont use it  ;D . Play with the shapes at runtime to change the shape of the tab.

oops points 9 and 10 are backwards on the screen shot sorry.
Title: Re: Example for rounded/smooth UI tabs
Post by: Alextp on October 14, 2017, 07:50:02 pm
hmm. The point is to paint curve the antialiased way. You say it's possible not on all WS and it's hard. But it's point: to paint curved tab in smooth lines on all WS.
Title: Re: Example for rounded/smooth UI tabs
Post by: taazz on November 05, 2017, 04:27:47 pm
hmm. The point is to paint curve the antialiased way. You say it's possible not on all WS and it's hard. But it's point: to paint curved tab in smooth lines on all WS.
OK I feel that this needs to be addressed I'm sorry for the long delay I was searching for relevant information in pascal and finally gave up. The problem with your request is that you excluded aggpas which has everything already build. The problem is that I can not see any way to do that with out rewriting a big portion of what is already in aggpas. You might be able to ignore some algorithms based on your choices of painting but not much. In any case since I do not have any pascal based example I decided to post what ever I have so far just to make this thread (more or less) informative. Here is a link to gpu gems 2 for antialised drawing https://developer.nvidia.com/gpugems/GPUGems2/gpugems2_chapter21.html (https://developer.nvidia.com/gpugems/GPUGems2/gpugems2_chapter21.html) and here is a link to an openVG implementation through opengl in C https://github.com/ileben/ShivaVG (https://github.com/ileben/ShivaVG) between the two you should have enough information to build your simple system.

Sorry for the delay.
Title: Re: Example for rounded/smooth UI tabs
Post by: Alextp on November 05, 2017, 04:49:41 pm
Thanks.
I found the solution. It is simple. a) make big bitmap with 5x size of tabs. b) paint on it 5x zoomed picture. of any tabs. c) Canvas.StretchDraw of bitmap to original canvas.
TinyPortal © 2005-2018