Canvas Element: Difference between revisions
Jump to navigation
Jump to search
m (Use Nasal highlighter) |
(Clipping) |
||
Line 5: | Line 5: | ||
= Properties = | = Properties = | ||
== 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. | |||
<syntaxhighlight lang="nasal"> | |||
# set clipping rectangle with x=10, y=5, width=90, height=45 | |||
el.set("clip", "rect(5, 100, 50, 10)"); | |||
</syntaxhighlight> | |||
== clip-frame == | |||
* '''Format''': GLOBAL | PARENT | LOCAL | |||
* '''Default''': GLOBAL | |||
Set the coordinate reference frame for the ''clip'' property. | |||
<syntaxhighlight lang="nasal"> | |||
# set clip reference frame to parent coordinate frame | |||
el.set("clip-frame", canvas.Element.PARENT); | |||
</syntaxhighlight> | |||
== visible == | |||
== z-index == | == z-index == |
Revision as of 11:01, 18 July 2014
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
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);