Difference between revisions of "Canvas Element"

From FlightGear wiki
Jump to navigation Jump to search
(Clipping)
(Some info on blend functions.)
Line 5: Line 5:
  
 
= Properties =
 
= Properties =
 +
 +
== blend-* ==
 +
 +
Set OpenGL blend function.
 +
For a single function for all color channels (as with [https://www.opengl.org/sdk/docs/man/html/glBlendFunc.xhtml glBlendFunc]) use the properties '''"blend-source"''' and '''"blend-destination"'''.
 +
To set separate blend functions for the rgb and alpha channels (as with [https://www.opengl.org/sdk/docs/man/html/glBlendFuncSeparate.xhtml 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 [https://www.opengl.org/sdk/docs/man/html/glBlendFunc.xhtml#description OpenGL Reference Pages] for details)
 +
 +
 +
Setting different blend functions for rgb and alpha:
 +
 +
<syntaxhighlight lang="nasal">
 +
# 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");
 +
</syntaxhighlight>
  
 
== clip ==
 
== clip ==

Revision as of 16:49, 10 November 2014


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