Recent

Author Topic: Example for rounded/smooth UI tabs  (Read 3090 times)

Alextp

  • Hero Member
  • *****
  • Posts: 1121
    • UVviewsoft
Example for rounded/smooth UI tabs
« 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.

taazz

  • Hero Member
  • *****
  • Posts: 5365
Re: Example for rounded/smooth UI tabs
« Reply #1 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.
« Last Edit: October 14, 2017, 03:10:38 pm by taazz »
Good judgement is the result of experience … Experience is the result of bad judgement.

OS : Windows 7 64 bit
Laz: Lazarus 1.4.4 FPC 2.6.4 i386-win32-win32/win64

Alextp

  • Hero Member
  • *****
  • Posts: 1121
    • UVviewsoft
Re: Example for rounded/smooth UI tabs
« Reply #2 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.

taazz

  • Hero Member
  • *****
  • Posts: 5365
Re: Example for rounded/smooth UI tabs
« Reply #3 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 and here is a link to an openVG implementation through opengl in C https://github.com/ileben/ShivaVG between the two you should have enough information to build your simple system.

Sorry for the delay.
Good judgement is the result of experience … Experience is the result of bad judgement.

OS : Windows 7 64 bit
Laz: Lazarus 1.4.4 FPC 2.6.4 i386-win32-win32/win64

Alextp

  • Hero Member
  • *****
  • Posts: 1121
    • UVviewsoft
Re: Example for rounded/smooth UI tabs
« Reply #4 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