Canvas Element

From FlightGear wiki
Revision as of 16:49, 10 November 2014 by TheTom (talk | contribs) (Some info on blend functions.)
Jump to navigation Jump to search


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);