Canvas Element
The FlightGear forum has a subforum related to: Canvas |
A handful of rendering primitives are available to draw on a canvas. Properties (see Property Tree for general information on FlightGear's property system) are used to control the appearance and behaviour of such Elements.
Properties
blend-*
Set OpenGL blend function. For a single function for all color channels (as with glBlendFunc) use the properties "blend-source" and "blend-destination". To set separate blend functions for the rgb and alpha channels (as with glBlendFuncSeparate) use the properties with "*-rgb" and "*-alpha" prefix.
- Format: "dst-alpha" | "dst-color" | "one" | "one-minus-dst-alpha" | "one-minus-dst-color" | "one-minus-src-alpha" | "one-minus-src-color" | "src-alpha" | "src-alpha-saturate" | "src-color" | "constant-color" | "one-minus-constant-color" | "constant-alpha" | "one-minus-constant-alpha" | "zero" (See the OpenGL Reference Pages for details)
Setting different blend functions for rgb and alpha:
# Standard alpha blending
el.set("blend-source-rgb", "src-alpha");
el.set("blend-destination-rgb", "one-minus-src-alpha");
# Just keep current alpha
el.set("blend-source-alpha", "zero");
el.set("blend-destination-alpha", "one");
clip
- Format: "auto" | "rect(<top>, <right>, <bottom>, <left>)"
- Default: "auto"
Set clipping rectangle for element and all its children. Only what is inside the clipping bounds will be shown.
# set clipping rectangle with x=10, y=5, width=90, height=45
el.set("clip", "rect(5, 100, 50, 10)");
clip-frame
- Format: GLOBAL | PARENT | LOCAL
- Default: GLOBAL
Set the coordinate reference frame for the clip property.
# set clip reference frame to parent coordinate frame
el.set("clip-frame", canvas.Element.PARENT);
visible
z-index
- Format: <number> (Integer)
- Default: 0
Change order in which elements are drawn. Elements with higher z-index are drawn later and cover allready drawn elements on overlapping parts.
# Draw before all elements (if no z-index of the other elements is lower than zero)
el.set("z-index", -1);
# Ensure el2 is drawn before/below el1
el1.set("z-index", 51);
el2.set("z-index", 50);