glVectorGraphics

[noeska]

The NEW glVectorGraphics unit allows to draw 2D vector graphics with OpenGL.

Features:
- Allows drawing shapes defined by an path. This path needs to be constructed as an SVG path.
- Basic shapes:
* rectangle (allows rounded corners)
* elipse / circle
* line
- Each shape can be applied with a 'style' determining how it is drawn. (e.g. linewidth, linecolor, fill, fillrotation, etc)
- Fill Types:
* none
* solid (rgba color)
* linear (uses 0..n points with x pos and rgba color)
* circular (uses 0..n points with x pos and rgba color)
* bitmap
* pattern (uses tiled 2D vector shapes as fill, can be a real slowdown)
- 2D Vector Fonts. Uses font outlines stored as svg paths. A tool converter is also in the project.
- Grouping (allows for making up a shape consisting of multiple paths / fills)

Also i made a start for User Interface classes. So far only the button is working.

The test/example program currently shows the image below.
http://www.noeska.net/images/glvggrad2.jpg

Example usage:


polyrect := TglvgRect.Create; //create an rectangle
polyrect.X:= 1.0; //position
polyrect.Y:= 1.0;
polyrect.Width:=100.0; //size
polyrect.Height:=200.0;
polyrect.Rx:=20.0; //rounded corner size
polyrect.Ry:=20.0;
polyrect.Style.Color.SetColor(1,0,0,1); //set solid color with individual rgba values
polyrect.Style.Color.a:=0.8; //it is also possible to set only the alpha value (transparency)
polyrect.Style.GradColorAngle:=90; //rotate the gradient color fill
polyrect.Style.NumGradColors := 2; //set the number of colors in the gradient color fill
polyrect.Style.GradColor[0].a :=1.0; //change the alpha for the first gradient color point (it takes over values from the solid color, so i change it here)
polyrect.Style.GradColor[0].SetColor('#FF0000'); //you can use web hex color codes
polyrect.Style.GradColor[1].SetColor('#00FF00');
polyrect.Style.FillType := glvgLinearGradient; //set the fill type to gradient
polyrect.Style.LineType := glvgSolid; //make the line style solid (basic line color is white)
polyrect.Polygon.Id:=7; //give it an id (need to automate that) , needed for stencil buffer filling
polyrect.Init; //init the rectange (makes an svg path from it)
polyrect.Polygon.Tesselate; //optionaly tesselate the object (does get auto called on first time rendering)


You can then render it with:


//rotate rounded rectangle
glrotatef(angle,0,0,1); //standard opengl rotate command
polyrect.Render; //draw the shape specified earlier.


As i have not yet written a canvas class yet the alpha transparency has to be manualy set.


// Set Alpha Blending with opengl commands
glEnable (GL_BLEND);
glBlendFunc (GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);



Currently it is only availble from my svn at: http://thuis.vanderhoning.net/svn_glvg/tags/version-0.5.1a

PS: Who is daring anough to make an example program featuring an converted svg drawing?

[Chien]

nice!

You source can be compiled and works ok after commented out lines related with
'times.txt' and 'test.bmp'.

servel years ago, I have write a SVG file render that implemented some basic shapes but
no fill method, I will try to find out those files and try to fit with your render.

I have another problem is to find out a fast way to analysis large text block, I remembered, I need wait about 5 seconds if I read a SVG file large more than 200K.

[noeska]

I am awaiting your results with your modified svg parser. 8)
The times.txt can be generated with the font tool.
test.bmp can be any bitmap file that is suiteable for opengl. (e.g. i use glbitmap).