Hi,
Neil Deakin (of XUL Planet fame) who seems to be the
only one left at Mozilla working on XUL has put
together a first draft for a new Mozilla XUL tag, that
is, <canvas>.
Neil writes in his blog:
I put together a first draft of the XUL canvas tag
patch. I also added a few examples. I haven't tested
patching and then compiling since I've never been able
to get patches to apply properly. So I can't guarantee
that it will work right. I can only compile on Linux
myself but I've hopefully got the Windows/Mac/OS2
changes right. The patch was created against Mozilla
1.5 since that's what I'm using for something else.
The canvas works fairly well, although some features
crash (drawing polygons). If anybody has a chance to
try it, let me know. Or, if you have bug fixes,
especially on various platforms.
In the <canvas> tag tech note Neil writes:
The canvas tag has support for two drawing modes:
buffered and unbuffered.
In buffered mode, a back-buffer is created which can
be drawn into. The back-buffer is drawn to the screen
when necessary. The buffer is intended to be a fixed
size set on element creation, although the size can be
changed later.
In unbuffered mode, the canvas will call a paint
method to handle the drawing whenever it needs to be
displayed. This will be called whenever the window is
resized or uncovered so it may be called often. The
paint method is expected to be implemented by the XUL
application. Unbuffered mode is suitable when the
canvas is expected to be resized frequently.
Drawing is done via an interface that provides a
variety of drawing primitives, such as drawLine,
drawRect, fillRect and so forth. There are also
drawString and drawImage methods. In addition, there
are getPixel and setPixel methods for pixel-level
drawing.
The underlying graphics code in Mozilla does not
handle the alpha part of a pixel, so direct alpha
drawing is not supported. However, a PNG drawn with
drawImage with be rendered correctly. The entire
canvas may also be made translucent with the CSS
moz-opacity property.
The canvas tag is designed to be extended via XBL (by
using extends="xul:canvas"). A simple custom rectangle
tag can be implemented in 8-10 lines of XBL. You can
also use the canvas tag without XBL, but you will need
to set some properties to get it to do anything
useful. In fact, a canvas with no script attached to
it will seem to do nothing.
CSS properties such as borders, margins and
backgrounds are automatically drawn by the canvas.
The canvas tag is a type of XUL box. Child nodes
placed inside a canvas will be laid out like a box.
The various box attributes such as align, pack and
flex will work on the canvas and its children.
The canvas also supports custom layout objects. When
the canvas is laid out, the canvas may call back to an
application-implemented interface to determine where
children should be placed. Although XUL provides
sufficient tags to control layout already, this
feature might be used by XBL-implemented tags with
very specific layout requirements.
Since canvases may be extended in XBL, they work in
XUL as well as other XML documents and in HTML.
The paint and layout objects are just interfaces so
they may be implemented in JavaScript or in native
code. In fact, if one was so inclined, one could
probably write a wrapper around an existing graphics
library to draw to the canvas.
Now if you wonder how the <canvas> tag looks like
in action. Here's a sample:
<canvasbuffer id="cb"
style="border: 1px solid green;
background-color: rgb(90%,90%,10%);"
width="300" height="300" />
<stack>
<rectangle style="border: 1px solid green;"
color="orange" left="10" top="10"
flex="1">
<rectangle style="-moz-opacity: 0.5;"
width="80" height="80" color="green"/>
<button label="First Button"/>
<button label="Second Button"/>
</rectangle>
<rectangle left="50" top="50" width="180"
height="40" color="blue"/>
</stack>
Full story @
http://www.xulplanet.com/ndeakin/article/231 and
http://www.xulplanet.com/ndeakin/article/230 and
http://www.xulplanet.com/ndeakin/tests/canvas/features.txt
- Gerald
-------------------------------------------------------
This SF.net email is sponsored by: SF.net Giveback Program.
Does SourceForge.net help you be more productive? Does it
help you create better code? SHARE THE LOVE, and help us help
YOU! Click Here: http://sourceforge.net/donate/
_______________________________________________
xul-announce mailing list
[EMAIL PROTECTED]
https://lists.sourceforge.net/lists/listinfo/xul-announce
