new Layer(oLayers, oLayerOpts)
Every option of the LayerOptions type has associated a property of the Layer object. For instance, the option:
back {string}, specifies the layer's background as a name of an HTML picture or a CSS coloris associated with the property:
Back {string}, specifies the layer's background as a name of an HTML picture or a CSS colorwhich means that the following statements are equivalent:
oLayer.Options = {back: "lime"}where oLayer is an object of Layer type
oLayer.SetOptions({back: "lime"})
oLayer.Shape = "back"
oLayer.SetShape("back")
Parameters:
| Name | Type | Description |
|---|---|---|
oLayers |
Layers | Specifies an object of Layers type, which indicates the layers collection that hosts the layer. |
oLayerOpts |
any | Specifies the layer's options as an object of LayerOptions type, or directly the layer's key as any value (ignored if missing) (@since 5.4). |
Members
Back :any
Type:
- any
Example
null {any}, no background is shown for the layer
"gauge_back" {string}, if there is a HTML picture with name "gauge_back", the layer's background is that HTML picture
"red" {string}, if there is no HTML picture with name "red", but "red" is a valid CSS color, the layer's background is filled with red color
Back
Brightness :LayerColorAdjustmentOptions
The getter of the Brightness property returns an object of LayerColorAdjustment type, which provides methods to get or set the brightness for each color channel separately, while the setter of the Brightness property accepts an object of LayerColorAdjustmentOptions type, which defines the brightness adjustment for each color channel.
Type:
- Since:
- 5.4
Example
{red: "value", green: "value", blue: "value"} {object}, complete darkness to full brightness as the layer's value increases from 0 to 100
{red: "value/2", green: "value/2", blue: "value/2"} {object}, the brightness of the layer is half of layer's value
{red: 0, green: 0, blue: 0} {object}, the layer is completely dark regardless of its value
Brightness
Clip :LayerClipOptions
The getter of the Clip property returns the layer's clipping region as an object of LayerClip type, while the setter accepts an object of LayerClipOptions type to set the clipping region.
Type:
- Since:
- 5.4
Example
null {null}, there is no clipping region and the whole layer is visible
{type: "ellipse", radiusX: 50, radiusY: 50} {object}, the layer is clipped to a circle with a radius of 50 pixels
Clip
Contrast :LayerColorAdjustmentOptions
The getter of the Contrast property returns an object of LayerColorAdjustment type, which provides methods to get or set the contrast for each color channel separately, while the setter of the Contrast property accepts an object of LayerColorAdjustmentOptions type, which defines the contrast adjustment for each color channel.
Type:
- Since:
- 5.4
Example
{red: "value", green: "value", blue: "value"} {object}, complete gray to full contrast as the layer's value increases from 0 to 100
{red: "value/2", green: "value/2", blue: "value/2"} {object}, the contrast of the layer is half of layer's value
{red: 0, green: 0, blue: 0} {object}, the layer is completely gray regardless of its value
Contrast
DefaultOffsetX :number
Any of the following properties can be used to move the layer:
- DefaultOffsetX and DefaultOffsetY properties indicate the default x- and y-offset of the layer
- OffsetX and OffsetY properties indicate additional x- and y-offset of the layer
- OffsetXValid and OffsetYValid properties validate / limit the x- and y-offset values of the layer
- Value, ValueToOffsetX, and ValueToOffsetY properties specify the format-expression to convert the value to x- and y-offset. The OffsetToValue property converts the current x- and y-offset to a value
Any of the following properties can be used to move or resize the layer:
- Left and Top properties specify the format-expression relative to the view, to determine the x- and y-position to show the current layer on the control
- Width and Height properties specify the format-expression relative to the view, to determine the width and height to show the current layer on the control
Type:
- number
Example
0 {number}, the layer is shown at the position specified by the left and offsetX fields
10 {number}, the layer is shown with a total x-offset of 10 pixels from the position specified by the left field
DefaultOffsetX
DefaultOffsetY :number
Any of the following properties can be used to move the layer:
- DefaultOffsetX and DefaultOffsetY properties indicate the default x- and y-offset of the layer
- OffsetX and OffsetY properties indicate additional x- and y-offset of the layer
- OffsetXValid and OffsetYValid properties validate / limit the x- and y-offset values of the layer
- Value, ValueToOffsetX, and ValueToOffsetY properties specify the format-expression to convert the value to x- and y-offset. The OffsetToValue property converts the current x- and y-offset to a value
Any of the following properties can be used to move or resize the layer:
- Left and Top properties specify the format-expression relative to the view, to determine the x- and y-position to show the current layer on the control
- Width and Height properties specify the format-expression relative to the view, to determine the width and height to show the current layer on the control
Type:
- number
Example
0 {number}, the layer is shown at the position specified by the top and offsetY fields
10 {number}, the layer is shown with a total y-offset of 10 pixels from the position specified by the top field
DefaultOffsetY
DefaultRotateAngle :number
Any of the following properties can be used to rotate the layer:
- DefaultRotateAngle property, specifies the default angle to rotate the layer
- RotateAngle property, specifies the angle to rotate the layer.
- RotateAngleValid property, validates / limits the rotation angle of the layer.
- Value and ValueToRotateAngle properties, specifies the expression to convert the value to rotating angle. The RotateAngleToValue property converts the current rotation angle to a value.
The following properties can be used to specify a different rotation center:
- RotateCenterLayer property, indicates the index of the layer the rotation is around.
- RotateCenterX property, indicates the expression that determines the x-origin of the rotation point relative to the RotateCenterLayer layer.
- RotateCenterY property, indicates the expression that determines the y-origin of the rotation point relative to the RotateCenterLayer layer.
The following properties can be used to change the rotation center, while the Layer.OnDrag property is exDoRotamove:
- RotamoveCenterX property, gets the x-coordinate of the background content's center (Layer.Back property), indicating the horizontal position of the visual center of the actual content, not the full image.
- RotamoveCenterY property, gets the y-coordinate of the background content's center (Layer.Back property), indicating the horizontal position of the visual center of the actual content, not the full image.
- RotamoveOffsetX property, gets the x-offset of the layer's center point during rotation when the Layer.OnDrag property is set to exDoRotamove or exDoRotate.
- RotamoveOffsetY property, gets the y-offset of the layer's center point during rotation when the Layer.OnDrag property is set to exDoRotamove or exDoRotate.
Type:
- number
Example
0 {number}, no rotation applied to the layer
-90 {number}, the layer is rotated 90 degrees counter-clockwise
90 {number}, the layer is rotated 90 degrees clockwise
DefaultRotateAngle
Fore :any
The expression supports the following keywords:
"value", gets the value of the Layer.Value property
Type:
- any
Example
null or "" {string}, the layer's caption is not shown on the layer's foreground
"value" {string}, the layer's caption is the value of the layer
"`<outline white><b><font ;20>` + (value format `0`)" {string}, shows the layer's value formatted as integer with white outlined bold font of size 20
Fore
ForeOpt :LayerForeOptions
It is important to note that changing a field of the ForeOpt property does not automatically update the control. For example, oLayer.ForeOpt.tfi = "
Type:
- Since:
- 5.4
Example
null {any}, the layer's caption is shown on the layer's foreground with the default formatting options
{tfi: "<fgcolor red> Arial 20", front: false} {object}, the layer's caption is shown with red color Arial font of size 20, behind the layer's background
{formatText: "wrap"} {object}, the layer's caption is shown with text wrapped within the layer's area
ForeOpt
Grayscale :number|string
The expression supports the following keywords:
"value", indicates the Layer.Value property of the layer, which is the value displayed by the layer and can be linked to the layer's rotation angle or offset though the rotateAngleToValue, offsetToValue fields, so when the layer is rotated or moved, its value changes accordingly.
Type:
- number | string
Example
50 {number}, the layer is displayed with 50% grayscale regardless of its value
"value/2" {string}, the grayscale level of the layer is half of its value
"100 - value" {string}, the grayscale level of the layer decreases as its value increases
Grayscale
Height :number|string
The expression supports the following keywords:
"width", indicates the width of the control
"height", indicates the height of the control
Any of the following properties can be used to move the layer:
- DefaultOffsetX and DefaultOffsetY properties indicate the default x- and y-offset of the layer
- OffsetX and OffsetY properties indicate additional x- and y-offset of the layer
- OffsetXValid and OffsetYValid properties validate / limit the x- and y-offset values of the layer
- Value, ValueToOffsetX, and ValueToOffsetY properties specify the format-expression to convert the value to x- and y-offset. The OffsetToValue property converts the current x- and y-offset to a value
Any of the following properties can be used to move or resize the layer:
- Left and Top properties specify the format-expression relative to the view, to determine the x- and y-position to show the current layer on the control
- Width and Height properties specify the format-expression relative to the view, to determine the width and height to show the current layer on the control
Type:
- number | string
Example
"" {string} or {null} or {undefined}, the layer is shown with its original width and height
12 {number}, the layer is shown with a height of 12 pixels
"height/2" {string}, the layer is shown with a height of half of the control's height
Height
Idem :any
Type:
- any
Example
null or "" {string}, the layer is not idem with any other layer
"knob,knob2" {string}, the knob,knob2 layers share the same offset and rotation-angle
Idem
(readonly) Index :number
Type:
- number
Example
The following statements are equivalent:
oLayer.GetIndex() {number}, gets the layer's index
oLayer.Index {number}, gets the layer's index
where oLayer is a layer of the control.
Index
Key :any
Type:
- any
Example
null or "" {string}, the layer has no key
"needle" {string}, the layer's key is "needle"
Key
Left :number|string
The expression supports the following keywords:
"width", indicates the width of the control
"height", indicates the height of the control
Any of the following properties can be used to move the layer:
- DefaultOffsetX and DefaultOffsetY properties indicate the default x- and y-offset of the layer
- OffsetX and OffsetY properties indicate additional x- and y-offset of the layer
- OffsetXValid and OffsetYValid properties validate / limit the x- and y-offset values of the layer
- Value, ValueToOffsetX, and ValueToOffsetY properties specify the format-expression to convert the value to x- and y-offset. The OffsetToValue property converts the current x- and y-offset to a value
Any of the following properties can be used to move or resize the layer:
- Left and Top properties specify the format-expression relative to the view, to determine the x- and y-position to show the current layer on the control
- Width and Height properties specify the format-expression relative to the view, to determine the width and height to show the current layer on the control
Type:
- number | string
Example
"0" or "" {string} or {null} or {undefined}, the layer is shown at the position specified by the offsetX field from the left edge of the control.
"width/2+10" {string}, the layer is shown at the horizontal center of the control, plus 10 pixels and any additional x-offset specified in defaultOffsetX and offsetX fields
Left
OffsetToValue :number|string
The expression supports the following keywords:
"value", "x" or "offsetx", indicates the Layer.OffsetX property
"y" or "offsety", indicates the Layer.OffsetY property
Any of the following properties can be used to move the layer:
- DefaultOffsetX and DefaultOffsetY properties indicate the default x- and y-offset of the layer
- OffsetX and OffsetY properties indicate additional x- and y-offset of the layer
- OffsetXValid and OffsetYValid properties validate / limit the x- and y-offset values of the layer
- Value, ValueToOffsetX, and ValueToOffsetY properties specify the format-expression to convert the value to x- and y-offset. The OffsetToValue property converts the current x- and y-offset to a value
Any of the following properties can be used to move or resize the layer:
- Left and Top properties specify the format-expression relative to the view, to determine the x- and y-position to show the current layer on the control
- Width and Height properties specify the format-expression relative to the view, to determine the width and height to show the current layer on the control
Type:
- number | string
Example
0 {number}, the value is always 0 regardless of the offsetX and offsetY fields
"x/2 + 4" {string}, converts the current x-offset to a value by dividing the x-offset by 2 and then adding 4
"value = 0 ? 0 : 1" {string}, converts the current x-offset to a value of 0 if the x-offset is 0 or 1 if the x-offset is not 0
OffsetToValue
OffsetX :number
Any of the following properties can be used to move the layer:
- DefaultOffsetX and DefaultOffsetY properties indicate the default x- and y-offset of the layer
- OffsetX and OffsetY properties indicate additional x- and y-offset of the layer
- OffsetXValid and OffsetYValid properties validate / limit the x- and y-offset values of the layer
- Value, ValueToOffsetX, and ValueToOffsetY properties specify the format-expression to convert the value to x- and y-offset. The OffsetToValue property converts the current x- and y-offset to a value
Any of the following properties can be used to move or resize the layer:
- Left and Top properties specify the format-expression relative to the view, to determine the x- and y-position to show the current layer on the control
- Width and Height properties specify the format-expression relative to the view, to determine the width and height to show the current layer on the control
Type:
- number
Example
0 {number}, the layer is shown at the position specified by the left and defaultOffsetX fields
10 {number}, the layer is shown with a total x-offset of 10 pixels from the position specified by the left and defaultOffsetX fields
OffsetX
OffsetXValid :number|string
The expression supports the following keywords:
"value", specifies the x-offset/y-offset of the layer, or 0 if not specified
"x", specifies the x-offset of the layer, equivalent of Layer.OffsetX property
"y", specifies the y-offset of the layer, equivalent of Layer.OffsetY property
"lwidth" specifies the width in pixels of the layer's view
"lheight", specifies the height in pixels of the layer's view
"width" specifies the width in pixels of the control
"height", specifies the height in pixels of the control
Any of the following properties can be used to move the layer:
- DefaultOffsetX and DefaultOffsetY properties indicate the default x- and y-offset of the layer
- OffsetX and OffsetY properties indicate additional x- and y-offset of the layer
- OffsetXValid and OffsetYValid properties validate / limit the x- and y-offset values of the layer
- Value, ValueToOffsetX, and ValueToOffsetY properties specify the format-expression to convert the value to x- and y-offset. The OffsetToValue property converts the current x- and y-offset to a value
Any of the following properties can be used to move or resize the layer:
- Left and Top properties specify the format-expression relative to the view, to determine the x- and y-position to show the current layer on the control
- Width and Height properties specify the format-expression relative to the view, to determine the width and height to show the current layer on the control
Type:
- number | string
Example
"" {string} or {null} or {undefined}, the offsetX field is not validated (offsetXValid field is ignored)
0 {number}, the OffsetX property is alwyays 0
"x MIN 0 MAX 48" {string}, the offsetX field is validated to be between 0 and 48 pixels
"round(x/8)*8" {string}, the offsetX field is spanned to the closest multiple of 8 pixels
OffsetXValid
OffsetY :number
Any of the following properties can be used to move the layer:
- DefaultOffsetX and DefaultOffsetY properties indicate the default x- and y-offset of the layer
- OffsetX and OffsetY properties indicate additional x- and y-offset of the layer
- OffsetXValid and OffsetYValid properties validate / limit the x- and y-offset values of the layer
- Value, ValueToOffsetX, and ValueToOffsetY properties specify the format-expression to convert the value to x- and y-offset. The OffsetToValue property converts the current x- and y-offset to a value
Any of the following properties can be used to move or resize the layer:
- Left and Top properties specify the format-expression relative to the view, to determine the x- and y-position to show the current layer on the control
- Width and Height properties specify the format-expression relative to the view, to determine the width and height to show the current layer on the control
Type:
- number
Example
0 {number}, the layer is shown at the position specified by the top and defaultOffsetY fields
10 {number}, the layer is shown with a total y-offset of 10 pixels from the position specified by the top and defaultOffsetY fields
OffsetY
OffsetYValid :number|string
The expression supports the following keywords:
"value", specifies the x-offset/y-offset of the layer, or 0 if not specified
"x", specifies the x-offset of the layer, equivalent of Layer.OffsetX property
"y", specifies the y-offset of the layer, equivalent of Layer.OffsetY property
"lwidth" specifies the width in pixels of the layer's view
"lheight", specifies the height in pixels of the layer's view
"width" specifies the width in pixels of the control
"height", specifies the height in pixels of the control
Any of the following properties can be used to move the layer:
- DefaultOffsetX and DefaultOffsetY properties indicate the default x- and y-offset of the layer
- OffsetX and OffsetY properties indicate additional x- and y-offset of the layer
- OffsetXValid and OffsetYValid properties validate / limit the x- and y-offset values of the layer
- Value, ValueToOffsetX, and ValueToOffsetY properties specify the format-expression to convert the value to x- and y-offset. The OffsetToValue property converts the current x- and y-offset to a value
Any of the following properties can be used to move or resize the layer:
- Left and Top properties specify the format-expression relative to the view, to determine the x- and y-position to show the current layer on the control
- Width and Height properties specify the format-expression relative to the view, to determine the width and height to show the current layer on the control
Type:
- number | string
Example
"" {string} or {null} or {undefined}, the offsetY field is not validated (offsetYValid field is ignored)
0 {number}, the OffsetY property is alwyays 0
"y MIN 0 MAX 48" {string}, the offsetY field is validated to be between 0 and 48 pixels
"round(y/8)*8" {string}, the offsetY field is spanned to the closest multiple of 8 pixels
OffsetYValid
OnDrag :RadialMenu.OnDragLayerEnum
- exDoMove, the layer is moved according to the mouse movement once the user drags it, so the RotateAngle property is not changed, while the OffsetX and OffsetY properties are updated according to the mouse movement.
- exDoRotate, the layer is rotated according to the mouse movement once the user drags it, so the RotateAngle property is updated according to the mouse movement, while the OffsetX and OffsetY properties are not changed.
- exDoRotamove, the layer is moved by rotation according to the mouse movement once the user drags it, but only the RotateAngle property is updated according to the mouse movement.
The Selectable property must be true for the OnDrag property to have effect, which means that the user can move or rotate the layer by dragging it only if the OnDrag property is set and the Selectable property is true. By default, the OnDrag property is null (equivalent of exDoNothing), which means that the layer is not draggable (the user cannot move or rotate the layer by dragging it).
Type:
Example
null {any}, the layer is not dragged (the user cannot move or rotate the layer by dragging it)
"move" {string}, 1 {number} or exontrol.RadialMenu.OnDragLayerEnum.exDoMove {RadialMenu.OnDragLayerEnum}, the layer is moved according to the mouse movement once the user drags it
OnDrag
Options :LayerOptions
Every option of the LayerOptions type has associated a property of the Layer object. For instance, the option:
back {string}, specifies the layer's background color or imageis associated with the property:
Back {string}, specifies the layer's background color or imagewhich means that the following statements are equivalent:
oLayer.Options = {back: "lime"}
oLayer.SetOptions({back: "lime"})
oLayer.Back = "lime"
oLayer.SetBack("lime")
It is important to note that changing a field of the Options object does not automatically update the layer. For example, oLayer.Options.back = "red" does not apply the change. Instead, you must assign the Options property again, such as oLayer.Options = {back: "red"}, so the control updates and applies the new value.
Type:
- Since:
- 5.4
Example
The following statements are equivalents:
oLayer.Options = {back: "red"}
oLayer.SetOptions({back: "red"})
where oLayer is an object of Layer type
Options
Position :number
Type:
- number
Example
0 {number}, the layer is the bottom layer, which is drawn first
1 {number}, the layer is drawn over the layer with position 0
Position
(readonly) RotamoveCenterX :number
Any of the following properties can be used to rotate the layer:
- DefaultRotateAngle property, specifies the default angle to rotate the layer
- RotateAngle property, specifies the angle to rotate the layer.
- RotateAngleValid property, validates / limits the rotation angle of the layer.
- Value and ValueToRotateAngle properties, specifies the expression to convert the value to rotating angle. The RotateAngleToValue property converts the current rotation angle to a value.
The following properties can be used to specify a different rotation center:
- RotateCenterLayer property, indicates the index of the layer the rotation is around.
- RotateCenterX property, indicates the expression that determines the x-origin of the rotation point relative to the RotateCenterLayer layer.
- RotateCenterY property, indicates the expression that determines the y-origin of the rotation point relative to the RotateCenterLayer layer.
The following properties can be used to change the rotation center, while the Layer.OnDrag property is exDoRotamove:
- RotamoveCenterX property, gets the x-coordinate of the background content's center (Layer.Back property), indicating the horizontal position of the visual center of the actual content, not the full image.
- RotamoveCenterY property, gets the y-coordinate of the background content's center (Layer.Back property), indicating the horizontal position of the visual center of the actual content, not the full image.
- RotamoveOffsetX property, gets the x-offset of the layer's center point during rotation when the Layer.OnDrag property is set to exDoRotamove or exDoRotate.
- RotamoveOffsetY property, gets the y-offset of the layer's center point during rotation when the Layer.OnDrag property is set to exDoRotamove or exDoRotate.
Type:
- number
Example
The following statements are equivalent:
oLayer.GetRotamoveCenterX() {number}, gets the x-position of the layer's center, while the layer's drag operation is exDoRotamove
oLayer.RotamoveCenterX {number}, gets the x-position of the layer's center, while the layer's drag operation is exDoRotamove
where oLayer is an object of Layer type.
RotamoveCenterX
(readonly) RotamoveCenterY :number
Any of the following properties can be used to rotate the layer:
- DefaultRotateAngle property, specifies the default angle to rotate the layer
- RotateAngle property, specifies the angle to rotate the layer.
- RotateAngleValid property, validates / limits the rotation angle of the layer.
- Value and ValueToRotateAngle properties, specifies the expression to convert the value to rotating angle. The RotateAngleToValue property converts the current rotation angle to a value.
The following properties can be used to specify a different rotation center:
- RotateCenterLayer property, indicates the index of the layer the rotation is around.
- RotateCenterX property, indicates the expression that determines the x-origin of the rotation point relative to the RotateCenterLayer layer.
- RotateCenterY property, indicates the expression that determines the y-origin of the rotation point relative to the RotateCenterLayer layer.
The following properties can be used to change the rotation center, while the Layer.OnDrag property is exDoRotamove:
- RotamoveCenterX property, gets the x-coordinate of the background content's center (Layer.Back property), indicating the horizontal position of the visual center of the actual content, not the full image.
- RotamoveCenterY property, gets the y-coordinate of the background content's center (Layer.Back property), indicating the horizontal position of the visual center of the actual content, not the full image.
- RotamoveOffsetX property, gets the x-offset of the layer's center point during rotation when the Layer.OnDrag property is set to exDoRotamove or exDoRotate.
- RotamoveOffsetY property, gets the y-offset of the layer's center point during rotation when the Layer.OnDrag property is set to exDoRotamove or exDoRotate.
Type:
- number
Example
The following statements are equivalent:
oLayer.GetRotamoveCenterY() {number}, gets the y-position of the layer's center, while the layer's drag operation is exDoRotamove
oLayer.RotamoveCenterY {number}, gets the y-position of the layer's center, while the layer's drag operation is exDoRotamove
where oLayer is an object of Layer type.
RotamoveCenterY
(readonly) RotamoveOffsetX :number
Any of the following properties can be used to rotate the layer:
- DefaultRotateAngle property, specifies the default angle to rotate the layer
- RotateAngle property, specifies the angle to rotate the layer.
- RotateAngleValid property, validates / limits the rotation angle of the layer.
- Value and ValueToRotateAngle properties, specifies the expression to convert the value to rotating angle. The RotateAngleToValue property converts the current rotation angle to a value.
The following properties can be used to specify a different rotation center:
- RotateCenterLayer property, indicates the index of the layer the rotation is around.
- RotateCenterX property, indicates the expression that determines the x-origin of the rotation point relative to the RotateCenterLayer layer.
- RotateCenterY property, indicates the expression that determines the y-origin of the rotation point relative to the RotateCenterLayer layer.
The following properties can be used to change the rotation center, while the Layer.OnDrag property is exDoRotamove:
- RotamoveCenterX property, gets the x-coordinate of the background content's center (Layer.Back property), indicating the horizontal position of the visual center of the actual content, not the full image.
- RotamoveCenterY property, gets the y-coordinate of the background content's center (Layer.Back property), indicating the horizontal position of the visual center of the actual content, not the full image.
- RotamoveOffsetX property, gets the x-offset of the layer's center point during rotation when the Layer.OnDrag property is set to exDoRotamove or exDoRotate.
- RotamoveOffsetY property, gets the y-offset of the layer's center point during rotation when the Layer.OnDrag property is set to exDoRotamove or exDoRotate.
Type:
- number
Example
The following statements are equivalent:
oLayer.GetRotamoveOffsetX() {number}, gets the x-offset of the layer's center point during rotation
oLayer.RotamoveOffsetX {number}, gets the x-offset of the layer's center point during rotation
where oLayer is an object of Layer type.
RotamoveOffsetX
(readonly) RotamoveOffsetY :number
Any of the following properties can be used to rotate the layer:
- DefaultRotateAngle property, specifies the default angle to rotate the layer
- RotateAngle property, specifies the angle to rotate the layer.
- RotateAngleValid property, validates / limits the rotation angle of the layer.
- Value and ValueToRotateAngle properties, specifies the expression to convert the value to rotating angle. The RotateAngleToValue property converts the current rotation angle to a value.
The following properties can be used to specify a different rotation center:
- RotateCenterLayer property, indicates the index of the layer the rotation is around.
- RotateCenterX property, indicates the expression that determines the x-origin of the rotation point relative to the RotateCenterLayer layer.
- RotateCenterY property, indicates the expression that determines the y-origin of the rotation point relative to the RotateCenterLayer layer.
The following properties can be used to change the rotation center, while the Layer.OnDrag property is exDoRotamove:
- RotamoveCenterX property, gets the x-coordinate of the background content's center (Layer.Back property), indicating the horizontal position of the visual center of the actual content, not the full image.
- RotamoveCenterY property, gets the y-coordinate of the background content's center (Layer.Back property), indicating the horizontal position of the visual center of the actual content, not the full image.
- RotamoveOffsetX property, gets the x-offset of the layer's center point during rotation when the Layer.OnDrag property is set to exDoRotamove or exDoRotate.
- RotamoveOffsetY property, gets the y-offset of the layer's center point during rotation when the Layer.OnDrag property is set to exDoRotamove or exDoRotate.
Type:
- number
Example
The following statements are equivalent:
oLayer.GetRotamoveOffsetY() {number}, gets the y-offset of the layer's center point during rotation
oLayer.RotamoveOffsetY {number}, gets the y-offset of the layer's center point during rotation
where oLayer is an object of Layer type.
RotamoveOffsetY
RotateAngle :number
Any of the following properties can be used to rotate the layer:
- DefaultRotateAngle property, specifies the default angle to rotate the layer
- RotateAngle property, specifies the angle to rotate the layer.
- RotateAngleValid property, validates / limits the rotation angle of the layer.
- Value and ValueToRotateAngle properties, specifies the expression to convert the value to rotating angle. The RotateAngleToValue property converts the current rotation angle to a value.
The following properties can be used to specify a different rotation center:
- RotateCenterLayer property, indicates the index of the layer the rotation is around.
- RotateCenterX property, indicates the expression that determines the x-origin of the rotation point relative to the RotateCenterLayer layer.
- RotateCenterY property, indicates the expression that determines the y-origin of the rotation point relative to the RotateCenterLayer layer.
The following properties can be used to change the rotation center, while the Layer.OnDrag property is exDoRotamove:
- RotamoveCenterX property, gets the x-coordinate of the background content's center (Layer.Back property), indicating the horizontal position of the visual center of the actual content, not the full image.
- RotamoveCenterY property, gets the y-coordinate of the background content's center (Layer.Back property), indicating the horizontal position of the visual center of the actual content, not the full image.
- RotamoveOffsetX property, gets the x-offset of the layer's center point during rotation when the Layer.OnDrag property is set to exDoRotamove or exDoRotate.
- RotamoveOffsetY property, gets the y-offset of the layer's center point during rotation when the Layer.OnDrag property is set to exDoRotamove or exDoRotate.
Type:
- number
Example
0 {number}, no rotation
90 {number}, rotate 90 degree clockwise
RotateAngle
RotateAngleToValue :string
The expression supports the following keywords:
"value", indicates the value of the Layer.RotateAngle property. Angle 0 is considered the 12 o'clock direction, and it increases clockwise, so 90 degrees is considered the 3 o'clock direction, 180 degrees the 6 o'clock direction, and 270 degrees (or -90 degrees) the 9 o'clock direction.
Type:
- string
Example
"value/180*100" {string}, when the layer's rotation angle is 180 degrees, its value becomes 100
"value/360*100" {string}, when the layer's rotation angle is 90 degrees, its value becomes 25
"value >= 270 ? (value - 270)/90*50 : (value/90)*50 + 50", {string} wraps and remaps angles into a 0 - 100 range
RotateAngleToValue
RotateAngleValid :string
The expression supports the following keywords:
"value", indicates the value of the Layer.RotateAngle property. Angle 0 is considered the 12 o'clock direction, and it increases clockwise, so 90 degrees is considered the 3 o'clock direction, 180 degrees the 6 o'clock direction, and 270 degrees (or -90 degrees) the 9 o'clock direction.
Any of the following properties can be used to rotate the layer:
- DefaultRotateAngle property, specifies the default angle to rotate the layer
- RotateAngle property, specifies the angle to rotate the layer.
- RotateAngleValid property, validates / limits the rotation angle of the layer.
- Value and ValueToRotateAngle properties, specifies the expression to convert the value to rotating angle. The RotateAngleToValue property converts the current rotation angle to a value.
The following properties can be used to specify a different rotation center:
- RotateCenterLayer property, indicates the index of the layer the rotation is around.
- RotateCenterX property, indicates the expression that determines the x-origin of the rotation point relative to the RotateCenterLayer layer.
- RotateCenterY property, indicates the expression that determines the y-origin of the rotation point relative to the RotateCenterLayer layer.
The following properties can be used to change the rotation center, while the Layer.OnDrag property is exDoRotamove:
- RotamoveCenterX property, gets the x-coordinate of the background content's center (Layer.Back property), indicating the horizontal position of the visual center of the actual content, not the full image.
- RotamoveCenterY property, gets the y-coordinate of the background content's center (Layer.Back property), indicating the horizontal position of the visual center of the actual content, not the full image.
- RotamoveOffsetX property, gets the x-offset of the layer's center point during rotation when the Layer.OnDrag property is set to exDoRotamove or exDoRotate.
- RotamoveOffsetY property, gets the y-offset of the layer's center point during rotation when the Layer.OnDrag property is set to exDoRotamove or exDoRotate.
Type:
- string
Example
"round(value/5)*5" {string}, snaps the rotation angle of the layer to multiples of 5 degrees
"value < 90 ? value : (value < 180 ? 90 : (value < 270 ? 270 : value))" {string}, limits the rotation angle between -90 (270) to 90 degrees
RotateAngleValid
RotateCenterLayer :any
Any of the following properties can be used to rotate the layer:
- DefaultRotateAngle property, specifies the default angle to rotate the layer
- RotateAngle property, specifies the angle to rotate the layer.
- RotateAngleValid property, validates / limits the rotation angle of the layer.
- Value and ValueToRotateAngle properties, specifies the expression to convert the value to rotating angle. The RotateAngleToValue property converts the current rotation angle to a value.
The following properties can be used to specify a different rotation center:
- RotateCenterLayer property, indicates the index of the layer the rotation is around.
- RotateCenterX property, indicates the expression that determines the x-origin of the rotation point relative to the RotateCenterLayer layer.
- RotateCenterY property, indicates the expression that determines the y-origin of the rotation point relative to the RotateCenterLayer layer.
The following properties can be used to change the rotation center, while the Layer.OnDrag property is exDoRotamove:
- RotamoveCenterX property, gets the x-coordinate of the background content's center (Layer.Back property), indicating the horizontal position of the visual center of the actual content, not the full image.
- RotamoveCenterY property, gets the y-coordinate of the background content's center (Layer.Back property), indicating the horizontal position of the visual center of the actual content, not the full image.
- RotamoveOffsetX property, gets the x-offset of the layer's center point during rotation when the Layer.OnDrag property is set to exDoRotamove or exDoRotate.
- RotamoveOffsetY property, gets the y-offset of the layer's center point during rotation when the Layer.OnDrag property is set to exDoRotamove or exDoRotate.
Type:
- any
Example
-1 {number}, the layer is rotated around the center specified by the rotateCenterX and rotateCenterY fields of itself
0 {number}, the layer is rotated around the center specified by the rotateCenterX and rotateCenterY fields of the layer with index 0, which is usually the background layer (default value)
1 {number}, the layer is rotated around the center specified by the rotateCenterX and rotateCenterY fields of the layer with index 1
RotateCenterLayer
RotateCenterX :string
The expression of the RotateCenterX and RotateCenterY properties supports the following keywords:
"lwidth", indicates the width in pixels of the layer
"width", specifies the width in pixels of the view / control
"lheight", indicates the height in pixels of the layer
"height", specifies the height in pixels of the view / control
Any of the following properties can be used to rotate the layer:
- DefaultRotateAngle property, specifies the default angle to rotate the layer
- RotateAngle property, specifies the angle to rotate the layer.
- RotateAngleValid property, validates / limits the rotation angle of the layer.
- Value and ValueToRotateAngle properties, specifies the expression to convert the value to rotating angle. The RotateAngleToValue property converts the current rotation angle to a value.
The following properties can be used to specify a different rotation center:
- RotateCenterLayer property, indicates the index of the layer the rotation is around.
- RotateCenterX property, indicates the expression that determines the x-origin of the rotation point relative to the RotateCenterLayer layer.
- RotateCenterY property, indicates the expression that determines the y-origin of the rotation point relative to the RotateCenterLayer layer.
The following properties can be used to change the rotation center, while the Layer.OnDrag property is exDoRotamove:
- RotamoveCenterX property, gets the x-coordinate of the background content's center (Layer.Back property), indicating the horizontal position of the visual center of the actual content, not the full image.
- RotamoveCenterY property, gets the y-coordinate of the background content's center (Layer.Back property), indicating the horizontal position of the visual center of the actual content, not the full image.
- RotamoveOffsetX property, gets the x-offset of the layer's center point during rotation when the Layer.OnDrag property is set to exDoRotamove or exDoRotate.
- RotamoveOffsetY property, gets the y-offset of the layer's center point during rotation when the Layer.OnDrag property is set to exDoRotamove or exDoRotate.
Type:
- string
Example
"" {string}, the rotation center is determined by the rotateCenterLayer layer's center (default value)
"lwidth/2 + 16" {string}, the x-origin of the rotation point is 16 pixels to the right of the center of the layer specified in the rotateCenterLayer field
RotateCenterX
RotateCenterY :string
The expression of the RotateCenterX and RotateCenterY properties supports the following keywords:
"lwidth", indicates the width in pixels of the layer
"width", specifies the width in pixels of the view / control
"lheight", indicates the height in pixels of the layer
"height", specifies the height in pixels of the view / control
Any of the following properties can be used to rotate the layer:
- DefaultRotateAngle property, specifies the default angle to rotate the layer
- RotateAngle property, specifies the angle to rotate the layer.
- RotateAngleValid property, validates / limits the rotation angle of the layer.
- Value and ValueToRotateAngle properties, specifies the expression to convert the value to rotating angle. The RotateAngleToValue property converts the current rotation angle to a value.
The following properties can be used to specify a different rotation center:
- RotateCenterLayer property, indicates the index of the layer the rotation is around.
- RotateCenterX property, indicates the expression that determines the x-origin of the rotation point relative to the RotateCenterLayer layer.
- RotateCenterY property, indicates the expression that determines the y-origin of the rotation point relative to the RotateCenterLayer layer.
The following properties can be used to change the rotation center, while the Layer.OnDrag property is exDoRotamove:
- RotamoveCenterX property, gets the x-coordinate of the background content's center (Layer.Back property), indicating the horizontal position of the visual center of the actual content, not the full image.
- RotamoveCenterY property, gets the y-coordinate of the background content's center (Layer.Back property), indicating the horizontal position of the visual center of the actual content, not the full image.
- RotamoveOffsetX property, gets the x-offset of the layer's center point during rotation when the Layer.OnDrag property is set to exDoRotamove or exDoRotate.
- RotamoveOffsetY property, gets the y-offset of the layer's center point during rotation when the Layer.OnDrag property is set to exDoRotamove or exDoRotate.
Type:
- string
Example
"" {string}, the rotation center is determined by the rotateCenterLayer layer's center (default value)
"lheight/2 + 16" {string}, the y-origin of the rotation point is 16 pixels below the center of the layer specified in the rotateCenterLayer field
RotateCenterY
RotateClip :boolean
Type:
- boolean
Example
true {boolean}, the layer's clipping region is rotated together with the layer
false {boolean}, the layer's clipping region is not rotated with the layer
RotateClip
Selectable :boolean
Type:
- boolean
Example
true {boolean}, the layer is selectable (the user can move or rotate it if the onDrag field is set)
false {boolean}, the layer is un-selectable (the user cannot move or rotate it even if the onDrag field is set)
Selectable
Top :number|string
The expression supports the following keywords:
"width", indicates the width of the control
"height", indicates the height of the control
Any of the following properties can be used to move the layer:
- DefaultOffsetX and DefaultOffsetY properties indicate the default x- and y-offset of the layer
- OffsetX and OffsetY properties indicate additional x- and y-offset of the layer
- OffsetXValid and OffsetYValid properties validate / limit the x- and y-offset values of the layer
- Value, ValueToOffsetX, and ValueToOffsetY properties specify the format-expression to convert the value to x- and y-offset. The OffsetToValue property converts the current x- and y-offset to a value
Any of the following properties can be used to move or resize the layer:
- Left and Top properties specify the format-expression relative to the view, to determine the x- and y-position to show the current layer on the control
- Width and Height properties specify the format-expression relative to the view, to determine the width and height to show the current layer on the control
Type:
- number | string
Example
"0" or "" {string} or {null} or {undefined}, the layer is shown at the position specified by the offsetY field from the top edge of the control.
"height/2+10" {string}, the layer is shown at the vertical center of the control, plus 10 pixels and any additional y-offset specified in defaultOffsetY and offsetY fields
Top
Transparency :number|string
The expression supports the following keywords:
"value", indicates the Layer.Value property of the layer, which is the value displayed by the layer and can be linked to the layer's rotation angle or offset though the rotateAngleToValue, offsetToValue fields, so when the layer is rotated or moved, its value changes accordingly.
Type:
- number | string
Example
50 {number}, the layer is displayed with 50% transparency regardless of its value
"value/2" {string}, the transparency of the layer is half of its value
"100 - value" {string}, the transparency of the layer decreases as its value increases
Transparency
Value :number
For instance:
- the control displays a clock, the value could be the current-time
- the control shows a switch, so the value could indicate the state of the switch
- the control shows a thermometer, so the value could be the current temperature
- the control displays a gauge, so the value could be the value on the gauge pointed by the needle
The onchange event occurs when the Layer.Value property is changed. During the onchange event, you can change values of other layers as well. For instance, if the second-hand of the clock is rotated, you can rotate the hour and the minute-hands of the clock as well.
The Value property indicates the value keyword in the following properties:
- ValueToOffsetX property specifies the format-expression to convert the value to x-offset. The OffsetX property is the result of evaluating the ValueToOffsetX property expression, while the onDrag field is exDoMove. The OffsetToValue property converts the current offset to a value.
- ValueToOffsetY property specifies the format-expression to convert the value to y-offset. The OffsetY property is the result of evaluating the ValueToOffsetY property expression, while the onDrag field is exDoMove. The OffsetToValue property converts the current offset to a value.
- ValueToRotateAngle property specifies the format-expression to convert the value to rotating angle. The RotateAngle property is the result of evaluating the ValueToRotateAngle property expression, while the onDrag field is exDoRotate or exDoRotamove. The RotateAngleToValue property converts the current rotation angle to a value.
The Value property works in association with the layer's OnDrag property as follows:
- If the onDrag field is exDoMove, evaluating the ValueToOffsetX property indicates the layer's OffsetX property.
- If the onDrag field is exDoMove, evaluating the ValueToOffsetY property indicates the layer's OffsetY property.
- If the onDrag field is exDoRotate or exDoRotamove, evaluating the ValueToRotateAngle property indicates the layer's RotateAngle property.
Type:
- number
Example
0 {number}, the value of the layer is 0
50 {number}, the value of the layer is 50
Value
ValueToOffsetX :number|string
The expression supports the following keywords:
"value", gets the value the Layer.Value property returns
Any of the following properties can be used to move the layer:
- DefaultOffsetX and DefaultOffsetY properties indicate the default x- and y-offset of the layer
- OffsetX and OffsetY properties indicate additional x- and y-offset of the layer
- OffsetXValid and OffsetYValid properties validate / limit the x- and y-offset values of the layer
- Value, ValueToOffsetX, and ValueToOffsetY properties specify the format-expression to convert the value to x- and y-offset. The OffsetToValue property converts the current x- and y-offset to a value
Any of the following properties can be used to move or resize the layer:
- Left and Top properties specify the format-expression relative to the view, to determine the x- and y-position to show the current layer on the control
- Width and Height properties specify the format-expression relative to the view, to determine the width and height to show the current layer on the control
Type:
- number | string
Example
0 {number}, sets the x-offset to 0 pixels regardless of the value field
"value=0 ? 0 : 48" {string}, sets the x-offset to 0 pixels if the value is 0 or 48 pixels if the value is not 0
ValueToOffsetX
ValueToOffsetY :number|string
The expression supports the following keywords:
"value", gets the value the Layer.Value property returns
Any of the following properties can be used to move the layer:
- DefaultOffsetX and DefaultOffsetY properties indicate the default x- and y-offset of the layer
- OffsetX and OffsetY properties indicate additional x- and y-offset of the layer
- OffsetXValid and OffsetYValid properties validate / limit the x- and y-offset values of the layer
- Value, ValueToOffsetX, and ValueToOffsetY properties specify the format-expression to convert the value to x- and y-offset. The OffsetToValue property converts the current x- and y-offset to a value
Any of the following properties can be used to move or resize the layer:
- Left and Top properties specify the format-expression relative to the view, to determine the x- and y-position to show the current layer on the control
- Width and Height properties specify the format-expression relative to the view, to determine the width and height to show the current layer on the control
Type:
- number | string
Example
0 {number}, sets the y-offset to 0 pixels regardless of the value field
"value=0 ? 0 : 48" {string}, sets the y-offset to 0 pixels if the value is 0 or 48 pixels if the value is not 0
ValueToOffsetY
ValueToRotateAngle :string
The expression supports the following keywords:
"value", indicates the value of the Layer.Value property
Any of the following properties can be used to rotate the layer:
- DefaultRotateAngle property, specifies the default angle to rotate the layer
- RotateAngle property, specifies the angle to rotate the layer.
- RotateAngleValid property, validates / limits the rotation angle of the layer.
- Value and ValueToRotateAngle properties, specifies the expression to convert the value to rotating angle. The RotateAngleToValue property converts the current rotation angle to a value.
The following properties can be used to specify a different rotation center:
- RotateCenterLayer property, indicates the index of the layer the rotation is around.
- RotateCenterX property, indicates the expression that determines the x-origin of the rotation point relative to the RotateCenterLayer layer.
- RotateCenterY property, indicates the expression that determines the y-origin of the rotation point relative to the RotateCenterLayer layer.
The following properties can be used to change the rotation center, while the Layer.OnDrag property is exDoRotamove:
- RotamoveCenterX property, gets the x-coordinate of the background content's center (Layer.Back property), indicating the horizontal position of the visual center of the actual content, not the full image.
- RotamoveCenterY property, gets the y-coordinate of the background content's center (Layer.Back property), indicating the horizontal position of the visual center of the actual content, not the full image.
- RotamoveOffsetX property, gets the x-offset of the layer's center point during rotation when the Layer.OnDrag property is set to exDoRotamove or exDoRotate.
- RotamoveOffsetY property, gets the y-offset of the layer's center point during rotation when the Layer.OnDrag property is set to exDoRotamove or exDoRotate.
Type:
- string
Example
"value/100*180" {string}, when the layer's value is 25, it is rotated 45 degrees
"value/100*360" {string}, when the layer's value is 25, it is rotated 90 degrees
"value < 50 ? (270 + value/50*90) : (value - 50)/50 * 90", {string} wraps and remaps values into a 0 - 360 range
ValueToRotateAngle
Visible :boolean
Type:
- boolean
Example
true {boolean}, the layer is visible and drawn on the control
false {boolean}, the layer is hidden and not drawn on the control
Visible
Width :number|string
The expression supports the following keywords:
"width", indicates the width of the control
"height", indicates the height of the control
Any of the following properties can be used to move the layer:
- DefaultOffsetX and DefaultOffsetY properties indicate the default x- and y-offset of the layer
- OffsetX and OffsetY properties indicate additional x- and y-offset of the layer
- OffsetXValid and OffsetYValid properties validate / limit the x- and y-offset values of the layer
- Value, ValueToOffsetX, and ValueToOffsetY properties specify the format-expression to convert the value to x- and y-offset. The OffsetToValue property converts the current x- and y-offset to a value
Any of the following properties can be used to move or resize the layer:
- Left and Top properties specify the format-expression relative to the view, to determine the x- and y-position to show the current layer on the control
- Width and Height properties specify the format-expression relative to the view, to determine the width and height to show the current layer on the control
Type:
- number | string
Example
"" {string} or {null} or {undefined}, the layer is shown with its original width and height
12 {number}, the layer is shown with a width of 12 pixels
"width/2" {string}, the layer is shown with a width of half of the control's width
Width
Methods
Remove()
- Since:
- 5.4
Example
The following statements are equivalents:
oRadialMenu.Layer(0).Remove(), removes the layer of index 0
oRadialMenu.Layers.Remove(0), removes the layer of index 0
where oRadialMenu is an object of RadialMenu type
Remove
drawBack(ctx, client, back)
Parameters:
| Name | Type | Description |
|---|---|---|
ctx |
CanvasRenderingContext2D | Specifies the canvas's context where the drawing occurs. |
client |
Array.<number> | Indicates the layer's client rectangle, as an array of [x,y,width,height] type, relative to the canvas. |
back |
any | Indicates the name of the HTML picture to be drawn as the layer's background, or a CSS color to fill the layer's background. |
- Since:
- 1.1
Example
The following sample code shows how to override the drawBack() method to draw a grid on the layer's background:
oRadialMenu.Layer("back").drawBack = (function(_super)
{
return function(ctx, client, back)
{
var x = client[0],
y = client[1],
width = client[2],
height = client[3];
for (var i = 0, l = 8; i <= l; i++)
ctx.drawHLine([x, y + i*height/l], width);
for (var i = 0, l = 4; i <= l; i++)
ctx.drawVLine([x + i*width/l, y], height);
return _super.apply(this, arguments);
}
})(oRadialMenu.Layer("back").drawBack)
where oRadialMenu is the control instance, and "back" is the name of the layer to which the drawBack() method is overridden.
drawBack
drawFore(ctx, client, fore)
Parameters:
| Name | Type | Description |
|---|---|---|
ctx |
CanvasRenderingContext2D | Specifies the canvas's context where the drawing occurs. |
client |
Array.<number> | Indicates the layer's client rectangle, as an array of [x,y,width,height] type, relative to the canvas. |
fore |
string | Indicates the ex-HTML caption to be drawn on the layer's foreground, which is the result of evaluating the expression specified for the Layer.Fore property. |
- Since:
- 1.1
Example
The following sample code shows how to override the drawFore() method to draw a semi-transparent green circle on the layer's foreground:
oRadialMenu.Layer("needle").drawFore= (function(_super)
{
return function(ctx, client, back)
{
ctx.drawShape(client,
{
primitive: "Circle",
fillColor: "rgba(0,255,0,0.25)",
frameColor: "rgb(0,128,0)",
frameSize: 2,
})
return _super.apply(this, arguments);
}
})(oRadialMenu.Layer("needle").drawFore)
where oRadialMenu is the control instance, and "needle" is the name of the layer to which the drawFore() method is overridden.
drawFore