Options class (Bezier)

The clip field specifies if the control clips the entire bezier to its client area. The clip field allows you to determine whether the Bézier curve should be clipped to fit within the control's client area. For example, if you set clip to false, the entire Bézier curve will be displayed even if it extends beyond the boundaries of the control's client area. If you set clip to true, any portion of the Bézier curve that extends outside the client area will be hidden, ensuring that only the part of the curve that fits within the control's visible area is shown. This can be useful for maintaining a clean and organized appearance, especially when dealing with curves that may have control points or segments that extend far from the origin.

false {boolean}, shows the bezier curve un-clipped
true {boolean}, clips the bezier curve

The color field defines the color to show the bezier's curve. The color field accepts any valid CSS color value, allowing you to customize the appearance of the Bézier curve. For example, if you set color to "red", it will display the curve in red. If you set color to "rgba(255,0,0,0.5)", it will show a semi-transparent red curve. You can use various CSS color formats such as hexadecimal, RGB, RGBA, HSL, HSLA, or predefined color names to achieve the desired look for your Bézier curve.

null {null}, defines a black-color
"transparent" {string}, defines a transparent-color (hides the bezier curve)
"red" {string}, defines a red-color
"rgb(255,0,0)" {string}, defines a red-color
"rgba(255,0,0,0.5)" {string}, defines a 50% red-color

The colorControl field specifies the CSS color to display the control points. The colorControl field allows you to customize the appearance of the control points for the Bézier curve. For example, if you set colorControl to "red", the control points will be displayed in red. If you set colorControl to "rgba(255,0,0,0.5)", the control points will appear as semi-transparent red. You can use any valid CSS color value to achieve the desired look for the control points, making it easier for users to identify and interact with them on the canvas.

null {null}, defines a black-color
"transparent" {string}, defines a transparent-color (hides the bezier control points)
"red" {string}, defines a red-color
"rgb(255,0,0)" {string}, defines a red-color
"rgba(255,0,0,0.5)" {string}, defines a 50% red-color

The colorLineControl field defines the CSS color to show the line between control point and bezier's origin. The colorLineControl field allows you to customize the appearance of the lines that connect the control points (P1 and P2) to the origin of the Bézier curve. For example, if you set colorLineControl to "red", these connecting lines will be displayed in red. If you set colorLineControl to "rgba(255,0,0,0.5)", the lines will appear as semi-transparent red. You can use any valid CSS color value to achieve the desired look for these lines, which can help users visually understand the relationship between the control points and the curve's origin.

null {null}, defines a black-color
"transparent" {string}, defines a transparent-color (hides the line between control point and bezier's origin)
"red" {string}, defines a red-color
"rgb(255,0,0)" {string}, defines a red-color
"rgba(255,0,0,0.5)" {string}, defines a 50% red-color

The colorScale field defines a color to show the lines of the scale. The colorScale field allows you to customize the color of the lines that make up the scale representing time or progress along the Bézier curve. For example, if you set colorScale to "red", the scale lines will be displayed in red. If you set colorScale to "rgba(255,0,0,0.5)", the scale lines will appear as semi-transparent red. You can use any valid CSS color value to achieve the desired look for the scale lines, which can help enhance visibility and contrast against the background and the Bézier curve itself when showScale is set to true.

null {null}, defines a black-color
"transparent" {string}, defines a transparent-color
"red" {string}, defines a red-color
"rgb(255,0,0)" {string}, defines a red-color
"rgba(255,0,0,0.5)" {string}, defines a 50% red-color

The colorScaleControl field specifies the color to display the control-scale point. The colorScaleControl field allows you to customize the color of the control point that is used to adjust the scale of the values displayed on the Bézier curve. For example, if you set colorScaleControl to "red", the control-scale point will be displayed in red. If you set colorScaleControl to "rgba(255,0,0,0.5)", the control-scale point will appear as semi-transparent red. You can use any valid CSS color value to achieve the desired look for this control point, which can help enhance visibility and make it easier for users to identify and interact with it when showScaleControl is set to true.

null {null}, defines a black-color
"transparent" {string}, defines a transparent-color
"red" {string}, defines a red-color
"rgb(255,0,0)" {string}, defines a red-color
"rgba(255,0,0,0.5)" {string}, defines a 50% red-color

The colorShadowValue field specifies the shadow's color for bezier values (while the value is between margins). The colorShadowValue field allows you to customize the color of the shadow that appears behind the numerical values displayed on the Bézier curve when those values are within certain margins. For example, if you set colorShadowValue to "red", the shadow behind the values will be red. If you set colorShadowValue to "rgba(255,0,0,0.5)", the shadow will appear as semi-transparent red. You can use any valid CSS color value to achieve the desired look for the shadow of these values, which can help enhance readability and provide a visual depth effect when showValue is set to true.

null {null}, defines a black-color
"transparent" {string}, defines a transparent-color
"red" {string}, defines a red-color
"rgb(255,0,0)" {string}, defines a red-color
"rgba(255,0,0,0.5)" {string}, defines a 50% red-color

The colorShadowValueOutside field specifies the shadow's color for bezier value (while the value is outside of margins). The colorShadowValueOutside field allows you to customize the color of the shadow that appears behind the numerical values displayed on the Bézier curve when those values are outside certain margins. For example, if you set colorShadowValueOutside to "red", the shadow behind the values will be red. If you set colorShadowValueOutside to "rgba(255,0,0,0.5)", the shadow will appear as semi-transparent red. You can use any valid CSS color value to achieve the desired look for the shadow of these values, which can help enhance readability and provide a visual depth effect when showValue is set to true and the values are outside of margins.

null {null}, defines a black-color
"transparent" {string}, defines a transparent-color
"red" {string}, defines a red-color
"rgb(255,0,0)" {string}, defines a red-color
"rgba(255,0,0,0.5)" {string}, defines a 50% red-color

The colorTextMarginsScale field defines the CSS color to display the margins of the scale. The colorTextMarginsScale field allows you to customize the color of the text that labels the margins of the scale representing time or progress along the Bézier curve. For example, if you set colorTextMarginsScale to "red", the margin labels will be displayed in red. If you set colorTextMarginsScale to "rgba(255,0,0,0.5)", the margin labels will appear as semi-transparent red. You can use any valid CSS color value to achieve the desired look for the margin scale text, which can help improve readability and visual contrast against the background and the Bézier curve itself when showScale is set to true.

null {null}, defines a black-color
"transparent" {string}, defines a transparent-color
"red" {string}, defines a red-color
"rgb(255,0,0)" {string}, defines a red-color
"rgba(255,0,0,0.5)" {string}, defines a 50% red-color

The colorTextScale field defines the color to display the scale (excluding the margins). The colorTextScale field allows you to customize the color of the text that labels the scale representing time or progress along the Bézier curve, excluding any margin indicators. For example, if you set colorTextScale to "red", the scale labels will be displayed in red. If you set colorTextScale to "rgba(255,0,0,0.5)", the scale labels will appear as semi-transparent red. You can use any valid CSS color value to achieve the desired look for the scale text, which can help improve readability and visual contrast against the background and the Bézier curve itself when showScale is set to true.

null {null}, defines a black-color
"transparent" {string}, defines a transparent-color
"red" {string}, defines a red-color
"rgb(255,0,0)" {string}, defines a red-color
"rgba(255,0,0,0.5)" {string}, defines a 50% red-color

The colorTextValue field defines the color to show the values on the bezier curve (while the value is between margins). The colorTextValue field allows you to customize the color of the numerical values displayed on the Bézier curve when those values are within certain margins. For example, if you set colorTextValue to "red", the text of the values will be red. If you set colorTextValue to "rgba(255,0,0,0.5)", the text will appear as semi-transparent red. You can use any valid CSS color value to achieve the desired look for the text of these values, which can help improve readability and visual contrast when showValue is set to true.

null {null}, defines a black-color
"transparent" {string}, defines a transparent-color
"red" {string}, defines a red-color
"rgb(255,0,0)" {string}, defines a red-color
"rgba(255,0,0,0.5)" {string}, defines a 50% red-color

The colorTextValueOutside field defines the color to show the values on the bezier curve (while the value is outside of margins). The colorTextValueOutside field allows you to customize the color of the numerical values displayed on the Bézier curve when those values are outside certain margins. For example, if you set colorTextValueOutside to "red", the text of the values will be red. If you set colorTextValueOutside to "rgba(255,0,0,0.5)", the text will appear as semi-transparent red. You can use any valid CSS color value to achieve the desired look for the text of these values, which can help improve readability and visual contrast when showValue is set to true and the values are outside of margins.

null {null}, defines a black-color
"transparent" {string}, defines a transparent-color
"red" {string}, defines a red-color
"rgb(255,0,0)" {string}, defines a red-color
"rgba(255,0,0,0.5)" {string}, defines a 50% red-color

The colorValue field defines the color to show the background of the values on the bezier curve (while the value is between margins). The colorValue field allows you to customize the background color of the numerical values displayed on the Bézier curve when those values are within certain margins. For example, if you set colorValue to "red", the background behind the values will be red. If you set colorValue to "rgba(255,0,0,0.5)", the background will appear as semi-transparent red. You can use any valid CSS color value to achieve the desired look for the background of these values, which can help enhance readability and visual appeal when showValue is set to true.

null {null}, defines a black-color
"transparent" {string}, defines a transparent-color
"red" {string}, defines a red-color
"rgb(255,0,0)" {string}, defines a red-color
"rgba(255,0,0,0.5)" {string}, defines a 50% red-color

The colorValueOutside field defines the color to show the background of the values on the bezier curve (while the value is outside of margins). The colorValueOutside field allows you to customize the background color of the numerical values displayed on the Bézier curve when those values are outside certain margins. For example, if you set colorValueOutside to "red", the background behind the values will be red. If you set colorValueOutside to "rgba(255,0,0,0.5)", the background will appear as semi-transparent red. You can use any valid CSS color value to achieve the desired look for the background of these values, which can help enhance readability and visual appeal when showValue is set to true and the values are outside of margins.

null {null}, defines a black-color
"transparent" {string}, defines a transparent-color
"red" {string}, defines a red-color
"rgb(255,0,0)" {string}, defines a red-color
"rgba(255,0,0,0.5)" {string}, defines a 50% red-color

The coord fiels defines the control points of the current bezier object. The SetCoord() method of the control accepts an array of [P1x, P1y, P2x, P2y] type that defines the control points P1(x1,y1) and P2(x2,y2) of the bezier curve. The GetCoord() method of the control returns an array of [P1x, P1y, P2x, P2y] type that defines the current control points of the bezier curve. The coord field can also accept a string that defines the name of a predefined transition such as "linear", "ease", "ease-in", "ease-out", "ease-in-out", "ease-in-out-expo" or "swipe". When you set the coord field to one of these predefined transition names, it automatically configures the control points P1 and P2 to create the corresponding Bézier curve for that transition.

The coord field can be any of the following:

• {string}, defines the name of a predefined transition as any of: "linear", "ease", "ease-in", "ease-out", "ease-in-out", "ease-in-out-expo" or "swipe", The exontrol.Def.G.Transitions namespace defines all available predefined transitions, where each transition is defined by specific control points P1 and P2 that create the corresponding Bézier curve for that transition. For example, setting coord to "ease" will configure the control points to create an "ease" Bézier curve, which is commonly used for smooth animations.
• {array}, specifies an array of [x1,y1,x2,y2] type that defines the control points P1(x1,y1), P2(x1,y1) of the bezier curve

"ease" {string}, generates an "ease" bezier transition
[1,0,0,1] {array}, shows a custom bezier curve

The formatColorValue field specifies a general expression that defines the intensity of the color to show the values, based on the progress (see also colorValue) The formatColorValue expression supports the following keywords:

• "value" {number}, a numeric expression that specifies the x-position to request the color (a value between 0 and 1)
• "color" {number}, A RGB component to be converted (a value between 0 and 255)

The formatColorValue property converts the RGB components of colorValue property. The colorValue property defines the color to show the background of the values on the bezier curve (while the value is between margins).

"0", indicates a black color or rgb(0,0,0) 
 "255", indicates a white color or rgb(255,255,255) 
 "255*value", returns a value between 0 and 255 that defines the RGB component based on the time/value.
 "color", indicates the original color (colorValue property)

The formatValue field specifies a general expression that defines the values to be shown on the curve, based on the progress.

The formatValue expression supports the following keywords:

• "value" {number}, indicates a value between 0 and 1, indicating the time,
• "scale" {number}, specifies the count of elements on the progress scale.

null {null}, shows values in default format
"``" {string}, no values are displayed
"value format 2" {string}, shows the value with 2 decimals
"scale * value format 2" {string}, shows the scaled values with 2 decimals

The highlightScaleProgress field highligths the value on the bezier, on the progress scale as well. The highlightScaleProgress field allows you to enable or disable the highlighting of the current value on the Bézier curve as it corresponds to the progress scale. For example, if you set highlightScaleProgress to false, the current value will not be highlighted on the curve, providing a more static visual representation. If you set highlightScaleProgress to true, the current value will be highlighted on the curve as it progresses along the scale, making it easier for users to track the movement and understand how the values change in relation to the progress along the curve.

false {boolean}, unhighligths the values on axis
true {boolean}, highligths the values on axis

The locked field specifies whether the control is protected against user interaction. When the control is locked, the user cannot modify the Bezier control points (P1 and P2), while when it is unlocked, the user is allowed to adjust them. The readOnly field behaves similarly to locked, as both properties prevent the user from making any changes to the control. In other words, if the control is either locked or set to read-only, the user cannot modify the Bezier curve in any way, including changing the P1 and P2 control points.

false {boolean}, unlocks the control
true {boolean}, locks the control (the user can not change the bezier control points)

The pArgValue field holds different properties to customize the object's primitive (see also primitiveValue).

The pArgValue parameter can include different properties for predefined primitive such as:

• exontrol.D.P.RoundRect or "RoundRect" => {x: 24, y:24}
• exontrol.D.P.Arc or "Arc" => {startAngle: 0, sweepAngle: Math.PI/2}
• exontrol.D.P.Pie or "Pie" => {startAngle: 0, sweepAngle: Math.PI/2}
• exontrol.D.P.PieRing or "PieRing" => {startAngle: 0, sweepAngle: PI/2, width: 10}
• exontrol.D.P.EllipticPolygon or "EllipticPolygon" => {edges: 6, startAngle: -Math.PI/2}
• exontrol.D.P.Polygon or "Polygon" => {points: [[0,100],[50,0],[100,100]]}
• exontrol.D.P.Star or "Star" => {edges: 6, startAngle: -Math.PI/2, deep: 0.5, tilt: 0.5}
• exontrol.D.P.Star or "Spline" => {points: [[0,100],[50,0],[100,100]], tension: 0, alpha: 0.5, closed: false}

The primitiveValue field defines the type of frame the object is displaying (see also pArgValue).

The primitiveValue could be any of the following predefined values:

• "Rect" {string}, defines a rectangular-object
• "RoundRect" {string}, defines a round rectangular-object. The pArgValue.x, pArgValue.y define the radius of round-corners.
• "Ellipse" {string}, defines an elliptic-object
• "Pie" {string}, defines a pie-object. The pArgValue.startAngle property defines the angle (radians) the pie starts from. The pArgValue.sweepAngle property defines the length (radians) of the pie.
• "Arc" {string}, defines an arc-object. The pArgValue.startAngle property defines the angle (radians) the arc starts from. The pArgValue.sweepAngle property defines the length (radians) of the arc.
• "Oval" {string}, defines an oval-object.
• "Circle" {string}, defines a circle-object.
• "Triangle" {string}, defines a triangle-object.
• "EllipticPolygon" {string}, defines an elliptic-polygon-object. The pArgValue.edges property defines the number of edges within the elliptic-polygon. The pArgValue.startAngle property defines the angle (radians) the elliptic-polygon starts from.
• "Polygon" {string}, defines a polygon-object. The pArgValue.points property defines points of the polygon.
• "Star" {string}, defines a star-object. The pArgValue.edges property defines the number of edges of the star. The pArgValue.startAngle property defines the angle (radians) the star-object starts from. The pArgValue.deep defines the star's deepness, while pArgValue.tilt defines the star's tile as a number betwee 0 and 1
• "Spline" {string}, defines the Catmull-Rom spline-primitive (a curve that goes through its control points). The pArg.points property defines the control-points of the curve. The pArg.tension property specifies the tension of the curve, as a value ptFrom 0(round) to 1 (rectangular). The pArg.alpha specifies the alpha of the curve (0.5 by default), while pArg.closed defines a closed curve
• "Summary" {string}, defines a summary-object (outlines the summary-bar)
• "Deadline" {string}, defines a deadline-object (outlines the deadline-bar)

The readOnly field indicates whether the control is read-only (no changes are allowed). When the control is read-only, the user cannot modify the Bezier control points (P1 and P2), while when it is not read-only, the user is allowed to adjust them. The locked field behaves similarly to readOnly, as both properties prevent the user from making any changes to the control. In other words, if the control is either locked or set to read-only, the user cannot modify the Bezier curve in any way, including changing the P1 and P2 control points.

false {boolean}, unlocks the control
true {boolean}, locks the control (the user can not change the bezier control points)

The restrict field specifies whether the control points of the bezier curve are limited to [0,1] range. The restrict field allows you to control whether the control points of the Bézier curve (P1 and P2) are constrained to lie within the [0,1] range on both axes. For example, if you set restrict to false, the control points can be positioned anywhere, allowing for a wider range of curve shapes. If you set restrict to true, the control points will be limited to the [0,1] range, which can help ensure that the curve behaves in a more predictable manner and stays within a certain area of influence. This can be particularly useful when you want to maintain a specific relationship between the control points and the curve's origin or when working with normalized coordinates.

false {boolean}, no limit for P1 and P2 control points
true {boolean}, limits the P1 and P2 control points to [0,1] range

The scaleRangeX field specifies an object of {min,max} type that limits the number of units to be displayed on the x-axis. The scaleRangeX field allows you to set a specific range for the units displayed along the x-axis of the scale representing time or progress on the Bézier curve. For example, if you set scaleRangeX to {min: 1, max: 100}, the x-axis will be limited to displaying units between 1 and 100, regardless of the value set in scaleX. This can be particularly useful for focusing on a specific portion of the scale or for ensuring that the scale does not become too cluttered with too many units.

The scaleRangeY field specifies an object of {min,max} type that limits the number of units to be displayed on the y-axis. The scaleRangeY field allows you to set a specific range for the units displayed along the y-axis of the scale representing the values of the Bézier curve. For example, if you set scaleRangeY to {min: 1, max: 100}, the y-axis will be limited to displaying units between 1 and 100, regardless of the value set in scaleY. This can be particularly useful for focusing on a specific portion of the scale or for ensuring that the scale does not become too cluttered with too many units.

The scaleX field specifies the number of units to be displayed on the x-axis. The scaleX field allows you to define how many units or divisions should be displayed along the x-axis of the scale representing time or progress on the Bézier curve. For example, if you set scaleX to 1, the x-axis will be divided into two units (0 and 1). If you set scaleX to 5, the x-axis will be divided into six units (0, 1, 2, 3, 4, and 5). Adjusting scaleX can help you customize the granularity of the scale to better fit your specific use case or to provide a clearer representation of the progression along the curve.

1 {number}, the units on x-axis are 0 and 1
5 {number}, the units on x-axis are 0, 1, 2, 3, 4 and 5

The scaleY field specifies the number of units to be displayed on the y-axis. The scaleY field allows you to define how many units or divisions should be displayed along the y-axis of the scale representing the values of the Bézier curve. For example, if you set scaleY to 1, the y-axis will be divided into two units (0 and 1). If you set scaleY to 5, the y-axis will be divided into six units (0, 1, 2, 3, 4, and 5). Adjusting scaleY can help you customize the granularity of the scale on the y-axis to better fit your specific use case or to provide a clearer representation of the values along the curve.

1 {number}, the units on y-axis are 0 and 1
5 {number}, the units on y-axis are 0, 1, 2, 3, 4 and 5

The showControl field specifies whether the P1 and P2 control points of the bezier are shown on the client. When set to true, the control points will be visible on the canvas, allowing users to see and interact with them directly. When set to false, the control points will be hidden, providing a cleaner visual representation of the Bézier curve without the distraction of the control points. This option is useful for situations where you want to display only the curve itself without showing the underlying control points that define its shape.

false {boolean}, hides the P1 and P2 control points of the bezier
true {boolean}, shows the P1 and P2 control points of the bezier

The showCoord field indicates whether the control displays the current coordinates of the bezier being displayed ( P1 and P2 control points). The showCoord field allows you to control the visibility of the current coordinates of the Bézier curve's control points (P1 and P2). For example, if you set showCoord to false, the coordinates will be hidden, providing a cleaner visual representation of the curve without any additional information. If you set showCoord to true, the coordinates of the control points will be displayed, giving users immediate feedback about the specific positions of P1 and P2, which can be particularly useful for understanding how these control points influence the shape of the Bézier curve.

false {boolean}, hides the bezier's coordinates
true {boolean}, shows the bezier's coordinates

The showDuplicateControl field determines whether the P1 and P2 control points that fall outside the visible area of the Bezier control (duplicate points) are displayed on the client edge. When set to true, these duplicate control points are shown on the edge, giving the user a visual indication of their position even if they are outside the main view. When set to false, the duplicate points are hidden, which can help reduce visual clutter when the control points extend beyond the visible area. This feature helps users understand the behavior of the Bézier curve even when some control points are not fully visible.

false {boolean}, hides the P1 and P2 control points (duplicate) of the bezier
true {boolean}, shows the P1 and P2 control points (duplicate) of the bezier

The showScale field indicates whether the scale time/progress is displayed. The showScale field allows you to control the visibility of the scale that represents time or progress along the Bézier curve. For example, if you set showScale to false, the scale will be hidden, providing a cleaner visual representation of the curve without any additional markings. If you set showScale to true, the scale will be displayed, giving users a reference for understanding the timing or progression of the curve, which can be particularly useful when analyzing animations or transitions represented by the Bézier curve.

false {boolean}, hides the scale time/progress
true {boolean}, shows the scale time/progress

The showScaleControl field indicates whether the control displays a control-scale point, that allows you to change the scale to display the values on the bezier. The showScaleControl field allows you to enable or disable the display of a control point on the scale that represents time or progress along the Bézier curve. This control point can be used to interactively adjust the scale, allowing users to change how values are displayed on the curve. For example, if you set showScaleControl to false, this control point will be hidden, preventing any interactive adjustments to the scale. If you set showScaleControl to true, the control point will be visible, giving users the ability to modify the scale and see how it affects the representation of values on the Bézier curve in real-time.

false {boolean}, hides the control-scale point
true {boolean}, shows the control-scale point

The showValue field indicates whether the values are shown on the bezier curve. The showValue field allows you to control whether the numerical values corresponding to points on the Bézier curve are displayed directly on the curve itself. For example, if you set showValue to false, these values will be hidden, providing a cleaner visual representation of the curve. If you set showValue to true, the values will be shown on the curve, giving users immediate feedback about the specific values at different points along the curve, which can be particularly useful for understanding the behavior of the curve in relation to its control points. The colorValue field defines the color to show the background of the values on the bezier curve (while the value is between margins), the colorTextValue field defines the color to show the values on the bezier curve (while the value is between margins), and the colorShadowValue field specifies the shadow's color for bezier values (while the value is between margins). The colorValueOutside field defines the color to show the background of the values on the bezier curve (while the value is outside of margins), the colorTextValueOutside field defines the color to show the values on the bezier curve (while the value is outside of margins), and the colorShadowValueOutside field specifies the shadow's color for bezier value (while the value is outside of margins).

false {boolean}, hides the values are shown on the bezier curve
true {boolean}, shows the values are shown on the bezier curve

The size fiels defines the size of the bezier's curve in pixels. The sizeHoverPointControl field defines the size to increase the bezier's control points when the mouse pointer hovers it. The size field allows you to control the thickness of the Bézier curve when it is rendered on the canvas. For example, if you set size to 1, it will display a Bézier curve that is 1 pixel wide, resulting in a thin line. If you set size to 5, it will show a Bézier curve that is 5 pixels wide, making it more prominent and easier to see. Adjusting the size can help you customize the appearance of the curve to better fit your design or visualization needs.

1 {number}, shows a bezier curve of 1-pixels wide
5 {number}, shows a bezier curve of 5-pixels wide

The sizeControl field defines the size in pixels to display the control points. The sizeControl field allows you to specify how large the control points of the Bézier curve should appear on the canvas. For example, if you set sizeControl to [0,0], it will effectively hide the control points by rendering them with a size of 0 pixels. If you set sizeControl to [4,4], it will display the control points as squares that are 4 pixels wide and 4 pixels tall, making them more visible and easier to interact with. Adjusting the sizeControl can help you customize the appearance of the control points to better suit your design or user interface requirements.

null {null}, defines the default size for bezier control points
[0,0] {array}, defines the empty bezier control points
[4,4] {array}, defines the a 4x4 bezier control points

The sizeHoverPointControl field defines the size to increase the bezier's control points when the mouse pointer hovers it. The size fiels defines the size of the bezier's curve in pixels. The sizeHoverPointControl field allows you to specify how much larger the control points of the Bézier curve should appear when the user hovers the mouse pointer over them. For example, if you set sizeHoverPointControl to 0, there will be no change in the size of the control points when hovered, meaning they will remain at their normal size. If you set sizeHoverPointControl to 4, it will increase the size of the control points by 4 pixels when the mouse pointer hovers over them, making them more prominent and easier to interact with. This feature can enhance the user experience by providing visual feedback when hovering over the control points.

null {null}, indicates the sizeHoverPointControl's default value
0 {number}, no change of the size to display the bezier's control points when the mouse pointer hovers it
4 {number}, increases by 4 the size to display the bezier's control points when the mouse pointer hovers it

The tfi field applies font attributes to captions within the control. The tfi field can be defined using a string representation such as "b monospace 16" or as an object such as {bold: true, fontName: "monospace", fontSize: 16}. By default, the tfi field is null, so the canvas uses its own default font defined by exontrol.defGUIFont (typically "12px sans-serif"). CSS fonts applied to surrounding HTML elements do not affect the canvas; the canvas text is independent of page styles, and the default font can be changed by setting exontrol.defGUIFont.

The tfi field as string supports any of the following keywords (each keyword can be specified using first letters only such as "b" for "bold) separated by space characters:

• bold, displays the text in bold (equivalent of <b> tag)
• italic, displays the text in italics (equivalent of <i> tag)
• underline, underlines the text (equivalent of <u> tag)
• strikeout, specifies whether the text is strike-through (equivalent of <s> tag)
• <fontName name>, specifies the font's family (equivalent of <font name> tag)
• <fontSize size>, specifies the size of the font (equivalent of <font ;size> tag)
• <fgColor CSSColor>, specifies the text's foreground color (equivalent of <fgcolor> tag)
• <bgColor CSSColor>, specifies the text's background color (equivalent of <bgcolor> tag)
• <shaColor CSSColor;width;offset>, defines the text's shadow (equivalent of <sha color;width;offset> tag)
• <outColor CSSColor>, shows the text with outlined characters (CSScolor) (equivalent of <out color> tag)
• <graColor CSSColor;mode;blend>, defines a gradient text (equivalent of <gra color;mode;blend> tag)

Any other word within the tfi field that's not recognized as a keyword is interpreted as:

• name of the font (not a number), specifies the font's family (equivalent of <font name> tag)
• size of the font (number), specifies the size of the font (equivalent of <font ;size> tag)

The tfi field as object supports any of the following fields:

• bold {boolean}, displays the text in bold (equivalent of <b> tag)
• italic {boolean}, displays the text in italics (equivalent of <i> tag)
• underline {boolean}, underlines the text (equivalent of <u> tag)
• strikeout {boolean}, specifies whether the text is strike-through (equivalent of <s> tag)
• fontName {string}, specifies the font's family (equivalent of <font name> tag)
• fontSize {number}, specifies the size of the font (equivalent of <font ;size> tag)
• fgColor {string}, specifies the text's foreground color (CSScolor) (equivalent of <fgcolor> tag)
• bgColor {string}, specifies the text's background color (CSScolor) (equivalent of <bgcolor> tag)
• shaColor {object}, specifies an object of {color, width, offset} type that defines the text's shadow (equivalent of <sha color;width;offset> tag), where:
  • color {string}, defines the color of the text's shadow (CSScolor)
  • width {number}, defines the size of the text's shadow
  • offset {number}, defines the offset to show the text's shadow relative to the text
• outColor {string}, shows the text with outlined characters (CSScolor) (equivalent of <out color> tag)
• graColor {object}, specifies an object of {color, mode, blend} type that defines a gradient text (equivalent of <gra color;mode;blend> tag), where:
  • color {string}, defines the gradient-color (CSScolor)
  • mode {number}, defines the gradient direction as 0 (left-right), 1 (default, top-bottom), 2 (left-center-right), and 3 (top-center-bottom)
  • blend {number}, defines the gradient blend as a value between 0 and 1

CSSColor or CSS legal color values can be specified by the following methods:

• Hexadecimal colors, is specified with: #RRGGBB, where the RR (red), GG (green) and BB (blue) hexadecimal integers specify the components of the color. All values must be between 00 and FF. For example, #0000ff value is rendered as blue, because the blue component is set to its highest value (ff) and the others are set to 00.
• Hexadecimal colors with transparency, is specified with: #RRGGBBAA, where AA (alpha) value must be between 00 and FF. For example, #0000ff80 defines a semi-transparent blue.
• RGB colors, is specified with the RGB(red, green, blue) function. Each parameter (red, green, and blue) defines the intensity of the color and can be an integer between 0 and 255. For example, rgb(0,0,255) defines the blue color.
• RGBA colors, are an extension of RGB color values with an alpha channel as RGBA(red, green, blue, alpha) function, where the alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque). For example, rgba(0,0,255,0.5) defines a semi-transparent blue.
• HSL colors, is specified with the HSL(hue, saturation, lightness) function, where hue is a degree on the color wheel (from 0 to 360) - 0 (or 360) is red, 120 is green, 240 is blue. saturation is a percentage value; 0% means a shade of gray and 100% is the full color. lightness is also a percentage; 0% is black, 100% is white. HSL stands for hue, saturation, and lightness - and represents a cylindrical-coordinate representation of colors. For example, hsl(240, 100%, 50%) defines the blue color.
• HSLA colors, are an extension of HSL color values with an alpha channel - which specifies the opacity of the object as HSLA(hue, saturation, lightness, alpha) function, where alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque). For example, hsla(240, 100%, 50%,0.5) defines a semi-transparent blue.
• Predefined/Cross-browser color names, 140 color names are predefined in the HTML and CSS color specification. For example, blue defines the blue color.

null {null}, the tfi field is ignored
"bold monospace 16 <fg blue>" {string}, defines Monospace font of 16px height, bold and blue
{bold: true, fontName: "monospace", fontSize: 16, fgColor: "blue"} {object}, defines Monospace font of 16px height, bold and blue

The wheelChange field specifies how much the control scrolls when the user rotates the mouse wheel. This setting allows you to adjust the sensitivity of the mouse wheel interaction with the control.

• Setting wheelChange to 0 disables mouse wheel actions, preventing the control from changing when the wheel is scrolled
• Setting wheelChange to a positive number, such as 5, increases the control's value by that amount each time the wheel is rotated, enabling faster adjustments

By modifying this value, you can fine-tune the control's responsiveness, making it easier for users to perform precise changes or larger adjustments as needed.

0 {number}, locks any action the mouse's wheel performs
5 {number}, increases the control's value by 5 once the user rotates the mouse's wheel