178 lines
8.4 KiB
HTML
178 lines
8.4 KiB
HTML
@top@
|
|
@start@
|
|
@:cent@<img src=img/evas_logo.png width=128 height=128>@:_cent@
|
|
@:cent@@:title@Evas@:_title@@:_cent@
|
|
@:para@
|
|
Evas is a hardware-accelerated canvas API for X-Windows that can draw
|
|
anti-aliased text, smooth super and sub-sampled images, alpha-blend, as well
|
|
as drop down to using normal X11 primitives such as pixmaps, lines and
|
|
rectangles for speed if your CPU or graphics hardware are too slow.
|
|
@:para@
|
|
Evas abstracts any need to know much abotu what the characteristics of your
|
|
XServer's display are - what depth or what magic visuals etc, it has. The
|
|
most you need to tell evas is how many colors (at a maximum) to use if the
|
|
display is not a turecolor display. By default it is suggested to use 216
|
|
colors (as this equates to a 6x6x6 colorcube - exactly the same colorcube
|
|
netscape, mozilla, gdkrgb etc. use so colors will be shared). If evas can't
|
|
allocate enough colors it keeps reducing the size of the colorcube until it
|
|
reaches plain black and white. This way it can display on anything from a
|
|
black and white only terminal to 16 color VGA to 256 color and all the way
|
|
up through 15, 16 24 and 32bit color. Here are some screenshots of a demo
|
|
evas app to show the rendering output in different situations
|
|
|
|
@:para@
|
|
@tile_area_start@
|
|
<img src=img/evas_colors.png width=128 height=128>
|
|
@tile_area_text@
|
|
@:para@
|
|
@:cent@@:title@Colors@:_title@@:_cent@
|
|
@:para@
|
|
The following screenshots of a demo Evas application were taken in 8 bit
|
|
color (256 colors) (with worse color situations down to monochrome
|
|
simulated) using the software rendering engine in Evas.
|
|
@:para@
|
|
<a href=evas_depth_eg_8_216.html><img src=img/evas_depth_eg_8_216_thumb.png width=80 height=80 border=1></a>
|
|
<a href=evas_depth_eg_8_128.html><img src=img/evas_depth_eg_8_128_thumb.png width=80 height=80 border=1></a>
|
|
<a href=evas_depth_eg_8_64.html><img src=img/evas_depth_eg_8_64_thumb.png width=80 height=80 border=1></a>
|
|
<a href=evas_depth_eg_8_32.html><img src=img/evas_depth_eg_8_32_thumb.png width=80 height=80 border=1></a>
|
|
<a href=evas_depth_eg_8_16.html><img src=img/evas_depth_eg_8_16_thumb.png width=80 height=80 border=1></a>
|
|
<a href=evas_depth_eg_8_8.html><img src=img/evas_depth_eg_8_8_thumb.png width=80 height=80 border=1></a>
|
|
<a href=evas_depth_eg_8_2.html><img src=img/evas_depth_eg_8_2_thumb.png width=80 height=80 border=1></a>
|
|
@:para@
|
|
The next pictures were taken of the same application in 8 bit color
|
|
simulating worse color depths by reducing the allocation max, and using the
|
|
X11 rendering engine that uses X11 primitives instead of the CPU (ie
|
|
pixmaps, lines, rectangles, masks etc.).
|
|
@:para@
|
|
<a href=evas_depth_eg_8x_216.html><img src=img/evas_depth_eg_8x_216_thumb.png width=80 height=80 border=1></a>
|
|
<a href=evas_depth_eg_8x_128.html><img src=img/evas_depth_eg_8x_128_thumb.png width=80 height=80 border=1></a>
|
|
<a href=evas_depth_eg_8x_64.html><img src=img/evas_depth_eg_8x_64_thumb.png width=80 height=80 border=1></a>
|
|
<a href=evas_depth_eg_8x_32.html><img src=img/evas_depth_eg_8x_32_thumb.png width=80 height=80 border=1></a>
|
|
<a href=evas_depth_eg_8x_16.html><img src=img/evas_depth_eg_8x_16_thumb.png width=80 height=80 border=1></a>
|
|
<a href=evas_depth_eg_8x_8.html><img src=img/evas_depth_eg_8x_8_thumb.png width=80 height=80 border=1></a>
|
|
<a href=evas_depth_eg_8x_2.html><img src=img/evas_depth_eg_8x_2_thumb.png width=80 height=80 border=1></a>
|
|
@:para@
|
|
The following screenshots are of the same Evas demo application in 16 bit
|
|
color, with the shots being software, OpenGL and X11 rendering engines
|
|
respectively.
|
|
@:para@
|
|
<a href=evas_depth_eg_16.html><img src=img/evas_depth_eg_16_thumb.png width=80 height=80 border=1></a>
|
|
<a href=evas_depth_eg_16gl.html><img src=img/evas_depth_eg_16gl_thumb.png width=80 height=80 border=1></a>
|
|
<a href=evas_depth_eg_16x.html><img src=img/evas_depth_eg_16x_thumb.png width=80 height=80 border=1></a>
|
|
@:para@
|
|
The following screenshots are of the same Evas demo application in 24/32 bit
|
|
color, with the shots being software, OpenGL and X11 rendering engines
|
|
respectively.
|
|
@:para@
|
|
<a href=evas_depth_eg_32.html><img src=img/evas_depth_eg_32_thumb.png width=80 height=80 border=1></a>
|
|
<a href=evas_depth_eg_32gl.html><img src=img/evas_depth_eg_32gl_thumb.png width=80 height=80 border=1></a>
|
|
<a href=evas_depth_eg_32x.html><img src=img/evas_depth_eg_32x_thumb.png width=80 height=80 border=1></a>
|
|
@:para@
|
|
@tile_area_end@
|
|
|
|
@:para@
|
|
Evas provides a structured mode graphics API and thus provides a set of
|
|
objects as primities to work with. As opposed to immediate mode where the
|
|
program actually draws the data, with structured mode the program describes
|
|
the data with primitives and lest the canvas handle the drawing. This means
|
|
the program has to describe what it wants to draw in terms of the primitives
|
|
given. Here is a list of them.
|
|
|
|
@:para@
|
|
@tile_area_start@
|
|
<img src=img/evas_canvas.png width=128 height=128>
|
|
@tile_area_text@
|
|
@:para@
|
|
@:cent@@:title@Images@:_title@@:_cent@
|
|
@:para@
|
|
One of the most versatile and appealing objects is the image object. You
|
|
simple tell Evas where the image file is located, where to put the image
|
|
what size the object is to be and how to fill the image object with the
|
|
image data, and Evas handles the rest. This makes dealing with images in
|
|
Evas childs play. Here is a quick example of how it would work:
|
|
@:para@
|
|
<pre>
|
|
object = evas_add_image_from_file(evas, "flower.png");
|
|
evas_move(evas, object, 10.0, 30.0);
|
|
evas_show(evas, object);
|
|
</pre>
|
|
@:para@
|
|
And it would look something like this:
|
|
@:para@
|
|
<a href=evas_image_eg_0.html><img src=img/evas_image_eg_0_thumb.png width=80 height=80 border=1></a>
|
|
@:para@
|
|
By default image bojects are the size of the original image (in pixels). If
|
|
we wish to make the object larger and have the image scale up or down in
|
|
size we could do:
|
|
@:para@
|
|
<pre>
|
|
evas_resize(evas, object, 320.0, 240.0);
|
|
evas_set_image_fill(evas, object, 0.0, 0.0, 320.0, 240.0);
|
|
</pre>
|
|
@:para@
|
|
Now our canvas would look like this:
|
|
@:para@
|
|
<a href=evas_image_eg_1.html><img src=img/evas_image_eg_1_thumb.png width=80 height=80 border=1></a>
|
|
@:para@
|
|
Easy, isn't it? now lets say we want to have a 300x200 unit rectangle filled
|
|
with this image we loaded, but we want it to tile (repeat) starting the tile
|
|
at coordinate 0,0 relative to the to-left corner of the image object area,
|
|
but have the tiled image size be 20x50.
|
|
@:para@
|
|
<pre>
|
|
evas_resize(evas, object, 300.0, 200.0);
|
|
evas_set_image_fill(evas, object, 0.0, 0.0, 20.0, 50.0);
|
|
</pre>
|
|
@:para@
|
|
Out result would be something like this:
|
|
@:para@
|
|
<a href=evas_image_eg_2.html><img src=img/evas_image_eg_2_thumb.png width=80 height=80 border=1></a>
|
|
@:para@
|
|
You may think "I can do this just as easily with norml X drawing primitievas
|
|
and a little extra sugar thrown in" but Evas does a whole lot mroe for you.
|
|
You never need to know how to render the objects or handle re-rendering
|
|
them. Evas does this and optimizes it for you. it handles layering and
|
|
resizing, it optimizes everything to minimize CPU effort with a dynamic set of
|
|
objects. It handles the work to the point where ALL you need to do is
|
|
create, destory, show, hide, move, resize etc. objects and Evas does the
|
|
rest of the nasty work for you.
|
|
@:para@
|
|
As you can see - the program has to know and do very little. There are many
|
|
powerful things you can do, like fade images in and out, re-color them so
|
|
they look tinted, have them rendered only within a certain area of the
|
|
canvas and more.
|
|
@:para@
|
|
@tile_area_end@
|
|
@:para@
|
|
Text is a very important part of many applications. Evas of course provides
|
|
a nice simple way of getting text into the Evas you have up without much
|
|
fuss or bother AND to boot it will anti-alias it so your edges are smooth
|
|
and not jagged AND allow fo the text to be semi-transparent and much more.
|
|
@:para@
|
|
@tile_area_start@
|
|
<img src=img/evas_text.png width=128 height=128>
|
|
@tile_area_text@
|
|
@:para@
|
|
@:cent@@:title@Text@:_title@@:_cent@
|
|
@:para@
|
|
Text allows you to display information in your Evas without needing image
|
|
objects with pre-rendered text. But first you have to realise fonts are
|
|
handled a little differently. First there is a font path - this is a list of
|
|
directories where to find font files. Evas supports Truetype fonts only -
|
|
some may think this bad, but there are more turetype fonts than any other
|
|
format out there and many are very good quality.
|
|
@:para@
|
|
Evas looks at the fonts in a directory by their filename, so a font you
|
|
reference in evas as "myfont", Evas will look in the directories (in the
|
|
order given) for a "myfont.ttf" file. It is case sensitive, but this system
|
|
proves to be nice and simple. Here is a simple example.
|
|
@:para@
|
|
object = ..
|
|
@:para@
|
|
@:para@
|
|
@:para@
|
|
@tile_area_end@
|
|
|
|
@end@
|
|
@bottom@
|