noeska
29-08-2009, 03:05 PM
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?
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?