Bezier class

Bezier(client, oOptsopt)

new Bezier(client, oOptsopt)

The ExBezier/JS component displays Bézier curves. Bézier curves are used in the time domain, especially in animation, user interface design, and smoothing cursor trajectories in eye-gaze-controlled interfaces. For example, a Bézier curve can define an object's velocity over time - such as an icon moving from A to B - instead of moving at a fixed number of pixels per step. ExBezier/JS is a standalone HTML component written entirely in JavaScript, without relying on any third-party libraries. It allows users to interactively define and modify the P1 and P2 control points of a cubic Bézier curve using drag-and-drop operations.

The component defines the Bézier function within the normalized coordinate space [0,0,1,1] and renders the resulting curve in real time on an HTML5 canvas. It provides visual feedback while adjusting the control points, making it easy to design, preview, and fine-tune easing functions or custom interpolation curves.

ExBezier/JS is ideal for web developers and designers who want to create smooth animations, transitions, or custom easing functions without needing to write complex mathematical code. It can be used in various applications, including game development, interactive data visualization, and user interface design. With its intuitive interface and real-time rendering capabilities, ExBezier/JS simplifies the process of working with Bézier curves in web projects. Additionally, ExBezier/JS is fully self-contained, lightweight, and can be integrated into any web application without external dependencies.

Parameters:
Name Type Attributes Description
client any The client parameter indicates the control's client area as:
  • array of [x,y,width,height] type that specifies the control's client area
  • string, that specifies the identifier of the canvas within the document, so the canvas's client area becomes the control's client area
  • HTMLCanvasElement, that specifies the identifier of the canvas within the document, so the canvas's client area becomes the control's client area
oOpts object <optional>
 An object of Bezier.Options type that defines different options to display the bezier.
Requires:
  • module:exontrol.commmon.min.js
Example
The following sample code adds a Bezier control to the giving canvas, and adds a handler for onchange event:

 var oBezier = new Bezier("cvsBezier");
 oBezier.on("change", function(oChange)
 {
   console.log("point: " + oChange.point + ", oBezier: " + oChange.oBezier.GetP12());
 });

where cvsBezier is the identifier of a canvas within the document

Requires

  • module:exontrol.commmon.min.js

Classes

Options

Members

(static, readonly) type :string

The type field holds the full name of the object, since constructor.name can differ in minimized or obfuscated code. This field is never altered by the control itself, so it can be reliably used to verify the object's type. It is particularly useful when multiple versions of a control exist or when you need to check the type without depending on constructor.name, which may be inconsistent in some scenarios, such as minified code. The Bezier.type member always returns "Bezier"
Type:
  • string
Since:
  • 1.8
Example
console.log(exontrol.Bezier.type); // logs "Bezier"

(static, readonly) version :string

The version field defines the version of the control. Each release of the control has a different version number, so you can use this field to check the control's version and ensure that it supports the features you want to use. The version field is especially useful when you have multiple versions of the control, or when you want to check the version of the control without relying on other properties or methods that may differ between versions. The current version is 5.2
Type:
  • string
Example
console.log(exontrol.Bezier.version); // displays the version of the control, for instance "5.2"

Listeners :exontrol.Lts

The Listeners field defines the events of the control, as an object of exontrol.Lts type. The exontrol.Lts type supports forEach(callback, thisArg) method that helps you to enumerate the events the control supports. The on() method adds an event listener to the specified event or defines a keyboard shortcut. The on() method enables you to listen for events and execute custom code when those events occur, or to define keyboard shortcuts that trigger specific actions within the component. You can use the on() method to enhance the interactivity and functionality of your application by responding to user actions or keyboard inputs. Use the off() method to remove previously bound event handlers or keyboard shortcuts. The Events section lists the events the component supports.
Type:
  • exontrol.Lts
Example
The following sample shows how you can get all events the component currently supports:

oBezier.Listeners.forEach(function(name)
{
 console.log(name);
});

The following sample displays information about the change it occured:

oBezier.Listeners.Add("onchange", function (oEvent)
{
 console.log(oEvent);
});

or

oBezier.on("change", function (oEvent)
{
 console.log(oEvent);
});

where oBezier is an object of Bezier type
Listeners

Options :Bezier.Options

The Options property defines control's general-options. The GetOptions() method returns the current options of the control, or null if using the default options. The SetOptions() method assigns new options to the control. The Options property is a shortcut for GetOptions/SetOptions methods.
Type:
Since:
  • 1.8
Example
The following example sets the control's options:

 oBezier.Options = 
 {
   locked: true,
   readOnly: false,
   coord: "swipe"
 }

 where oBezier is an object of Bezier type.
Options

Shortcuts :exontrol.Sts

The Shortcuts field defines the shortcuts of the control, as an object of exontrol.Sts type. The Shortcuts field defines the shortcuts of the control, as an object of exontrol.Sts type. The on() method enables you to listen for events and execute custom code when those events occur, or to define keyboard shortcuts that trigger specific actions within the component. You can use the on() method to enhance the interactivity and functionality of your application by responding to user actions or keyboard inputs. Use the off() method to remove previously bound event handlers or keyboard shortcuts. In order to provide keyboard support for the component, the owner <canvas> element must include the tabIndex attribute, as <canvas ... tabIndex="0">. You can associated a function or a callback to any shortcut.
Type:
  • exontrol.Sts
Example
The following sample displays a message once the user presses the Shift + Insert keys combination:

oBezier.Shortcuts.Add( "SHIFT + Insert", function()
{
  alert("SHIFT + Insert has been pressed")
});

where oBezier is an object of Bezier type
Shortcuts

Methods

AdjustPointToScaleView(oBezierPoint) → {object}

The AdjustPointToScaleView() method adjusts the specified Bézier point to match the current grid scale. In other words, it recalculates the point so it lies on a grid line defined by the current scale. For example, if the current scale is {x: 0.25, y: 0.25} and the given Bézier point is {x: 0.12, y: 0.78}, the method returns {x: 0.25, y: 0.75}, which is the closest point aligned to the current scale. The GetScale() method returns the current scale as an object of type {x, y}, where x represents the horizontal scale and y represents the vertical scale.
Parameters:
Name Type Description
oBezierPoint object An object of {x,y} type that specifies the bezier point to convert.
Properties
Name Type Description
x number Indicates the x-coordinate of the point.
y number Indicates the y-coordinate of the point.
Returns:
Returns the converted bezier point.
Type
object
Example
console.log(oBezier.AdjustPointToScaleView({x: 0.12, y: 0.78})), assuming the current scale is {x: 0.1, y: 0.1}, the method returns {x: 0.1, y: 0.8}, as it is the closest point to the giving one, that fits the current scale.
AdjustPointToScaleView

GetCanvas() → {HTMLCanvasElement}

The GetCanvas() method returns the HTMLCanvasElement object where the control is currently running on. The control is always running on a canvas, which is the canvas of the control's canvas-window (exontrol.CW). The GetCanvas() method is useful when you need to access the canvas directly. You can also use the GetCanvas() method to retrieve the canvas's context and perform custom drawing operations using the Canvas API. It is recommended to call the exontrol.CC.Resize(<canvas>, [width], [height]) method to resize and refresh the control; otherwise, the control's content is lost.
Returns:
Returns the HTMLCanvasElement object the control is running on.
Type
HTMLCanvasElement

GetCoord() → {array}

The GetCoord() method gets the current P1 and P2 control points of the bezier. The P1 and P2 control points define the shape of the bezier curve, and they are represented as points of {x,y} type, where x and y are in [0,1] range, and indicate the coordinates of the control point on the bezier surface. The GetCoord() method returns value is an array of [P1.x,P1.y,P2.x,P2.y] type, that defines the both control points P1, P2 of the bezier. The SetCoord() method changes the control points of the current bezier object. The GetP() method returns a specified control point based on its index.
Returns:
returns an array of [P1.x,P1.y,P2.x,P2.y] type, that defines the both control points P1, P2 of the bezier.
Type
array
Example
The following sample gets the current control points of the bezier:

 var rgCoord = oBezier.GetCoord();

where oBezier is an object of Bezier type, and the returned rgCoord is an array of [P1.x,P1.y,P2.x,P2.y] type, that defines the both control points P1, P2 of the bezier.
GetCoord

GetP(point) → {object}

The GetP() method returns a specified control point based on its index. The control points, P1 and P2, define the shape of the Bezier curve. Each control point is represented as an object with x and y properties, where both x and y are values in the [0, 1] range, indicating the coordinates of the control point on the Bezier surface. The GetP() method accepts a numeric index (1 for P1 and 2 for P2) and returns the corresponding control point as an object of {x, y} type. If an invalid index is provided, the method returns null. The GetCoord() method gets the current P1 and P2 control points of the bezier.
Parameters:
Name Type Description
point object An object of {x,y} type that specifies the coordinates of the control point being requested.
Properties
Name Type Description
x number Indicates the x-coordinate of the control point being requested.
y number Indicates the y-coordinate of the control point being requested.
Returns:
Returns an object of {x,y} type that indicates the control point, or null if not found.
Type
object
Example
The following sample gets the first control point P1 of the bezier:

 var oP1 = oBezier.GetP(1);

where oBezier is an object of Bezier type, and the returned oP1 is an object of {x,y} type that indicates the coordinates of the first control point P1 of the bezier.

The following sample gets the second control point P2 of the bezier:

 var oP2 = oBezier.GetP(2);

where oBezier is an object of Bezier type, and the returned oP2 is an object of {x,y} type that indicates the coordinates of the second control point P2 of the bezier.
GetP

GetScale() → {object}

The GetScale() method returns the current scale. The scale defines the number of units to be displayed on the x and y axes of the bezier. The scale is represented as an object of {x,y} type, where x indicates the horizontal scale (time) and y indicates the vertical scale (value). For example, if the current scale is {x: 0.25, y: 0.25}, it means that each grid line on the bezier's client area represents 0.25 units on both the x and y axes. The SetScale() method changes the current scale. The AdjustPointToScaleView() method adjusts the specified Bézier point to match the current grid scale. The IncScale() method increases or decreases the current scale by xInc/yInc units.
Returns:
Returns an object of {x,y} type that defines the scale.
Type
object
Example
The following sample gets the current scale of the bezier:

 var oScale = oBezier.GetScale();

where oBezier is an object of Bezier type, and the returned oScale is an object of {x,y} type that defines the current scale of the bezier.
GetScale

IncScale(xInc, yInc) → {boolean}

The IncScale() method increases or decreases the current scale by xInc/yInc units. The scale defines the number of units to be displayed on the x and y axes of the bezier. The scale is represented as an object of {x,y} type, where x indicates the horizontal scale (time) and y indicates the vertical scale (value). For example, if the current scale is {x: 0.25, y: 0.25}, it means that each grid line on the bezier's client area represents 0.25 units on both the x and y axes. The GetScale() method returns the current scale. The SetScale() method changes the current scale. The AdjustPointToScaleView() method adjusts the specified Bézier point to match the current grid scale.
Parameters:
Name Type Description
xInc number A numeric value that specifies number of units to increase the scale on x-axis (time).
yInc number A numeric value that specifies number of units to increase the scale on y-axis (time).
Returns:
Returns true, if the bezier's scale has been changed
Type
boolean

Refresh()

The Refresh() method forces the control to redraw and update its layout without modifying any of its properties or data. It is typically used when the visual appearance needs to be recalculated or repainted, even though no structural or state changes were made.

For example, call Refresh() when:

  • The control's container has been resized and the layout must be recalculated.
  • External CSS or styling changes affect the control's appearance.
  • The control becomes visible after being hidden.
  • You need to ensure the UI is visually synchronized with its current internal state.

The method does not alter the control's data, options, or configuration - it only updates the rendered output.

Since:
  • 4.0
Example
oBezier.Refresh(), refreshes the control
Refresh

SetCoord(P1opt, P2opt, P3opt, P4opt)

The SetCoord() method updates the control points of the current Bezier object. It accepts up to four parameters and supports multiple input formats, as described below. The P1 and P2 control points determine the shape of the Bezier curve. Each point is defined as an {x, y} object, where both x and y are values in the [0, 1] range, representing the control point's position on the normalized Bezier surface. The GetCoord() method retrieves the current control points of the Bezier object. It returns an array in the format [P1.x, P1.y, P2.x, P2.y], which fully defines both control points (P1 and P2) of the curve.
Parameters:
Name Type Attributes Description
P1 string | number | Array | Object <optional>
  • If a string, specifies a predefined Bezier transition (for example: "ease"). The available predefined transitions are: "linear", "ease", "ease-in", "ease-out", and "ease-in-out". The exontrol.Def.G.Transitions namespace defines all available predefined transitions
  • If an array of four numbers, defines both control points in the format [P1.x, P1.y, P2.x, P2.y].
  • If an array of two numbers, defines the first control point in the format [P1.x, P1.y].
  • If an object, defines the first control point in the format {x: P1.x, y: P1.y}.
  • If a number, represents the P1.x value (used only in the 4-parameter form).
P2 number | Array | Object <optional>
  • If an array of two numbers, defines the second control point in the format [P2.x, P2.y].
  • If an object, defines the second control point in the format {x: P2.x, y: P2.y}.
  • If a number, represents the P1.y value (used only in the 4-parameter form).
P3 number <optional>
  • Represents the P2.x value (used only in the 4-parameter form).
P4 number <optional>
  • Represents the P2.y value (used only in the 4-parameter form).
Example
For instance, any of the following generates an "ease" bezier transition:

 1-parameter

   "ease"
   [0.25, 0.1, 0.25, 1.0]

 2-parameters

   [0.25, 0.1], [0.25, 1.0]
   {x: 0.25, y: 0.1}, {x: 0.25, y: 1.0}
   [0.25, 0.1], {x: 0.25, y: 1.0}
   {x: 0.25, y: 0.1}, [0.25, 1.0]

 4-parameters

   0.25, 0.1, 0.25, 1.0
SetCoord

SetP(point, value)

The SetP() method changes the coordinates of the specified control point. The control points, P1 and P2, define the shape of the Bezier curve. Each control point is represented as an object with x and y properties, where both x and y are values in the [0, 1] range, indicating the coordinates of the control point on the Bezier surface. The SetP() method accepts a numeric index (1 for P1 and 2 for P2) to specify which control point to update, and an object of {x, y} type that defines the new coordinates for that control point. If the 'restrict' option is enabled for the Bezier control, the method will adjust the provided coordinates to ensure they remain within the [0, 1] range before updating the control point. The GetP() method returns a specified control point based on its index.
Parameters:
Name Type Description
point number A numeric expression that defines the index of the control point to be changed. The valid values are 1 and 2 corrsponding to the P1 and P2 control points of the control.
value object An object of {x,y} type that defines the new control point.
Properties
Name Type Description
x number Specifies the new x-coordinate of the control point.
y number Specifies the new y-coordinate of the control point.
Example
The following sample changes the coordinates of the first control point P1 of the bezier to {x: 0.3, y: 0.5}:

 oBezier.SetP(1, {x: 0.3, y: 0.5});

where oBezier is an object of Bezier type, the first parameter '1' indicates that we want to change the first control point P1 of the bezier, and the second parameter is an object of {x,y} type that defines the new coordinates for the P1 control point.

The following sample changes the coordinates of the second control point P2 of the bezier to {x: 0.6, y: 0.8}:

 oBezier.SetP(2, {x: 0.6, y: 0.8});

where oBezier is an object of Bezier type, the first parameter '2' indicates that we want to change the second control point P2 of the bezier, and the second parameter is an object of {x,y} type that defines the new coordinates for the P2 control point.
SetP

SetScale(oBezierScale)

The SetScale() method changes the current scale. The scale defines the number of units to be displayed on the x and y axes of the bezier. The scale is represented as an object of {x,y} type, where x indicates the horizontal scale (time) and y indicates the vertical scale (value). For example, if the current scale is {x: 0.25, y: 0.25}, it means that each grid line on the bezier's client area represents 0.25 units on both the x and y axes. The GetScale() method returns the current scale. The AdjustPointToScaleView() method adjusts the specified Bézier point to match the current grid scale. The IncScale() method increases or decreases the current scale by xInc/yInc units.
Parameters:
Name Type Description
oBezierScale object An object of {x,y} type that indicates the new scale. The x, y should be numbers between 0 and 1.
Example
The following sample changes the current scale of the bezier to {x: 0.5, y: 0.5}:

 oBezier.SetScale({x: 0.5, y: 0.5});

where oBezier is an object of Bezier type, and the parameter is an object of {x,y} type that indicates the new scale for the bezier, where x, y should be numbers between 0 and 1.
SetScale

off(event, listener, methodopt)

The off() method removes a previously bound handler from a specified event, allowing you to stop listening for that event and prevent the associated actions from being executed. Also removes keyboard shortcuts previously defined using the on() method. The event name is case-insensitive and may or may not include the 'on' prefix. For example, 'click' is equivalent to 'onclick' and vice versa. If the event parameter is missing/empty/undefined, all event handlers are removed from the control. If the listener parameter is missing/empty/undefined, all handlers of the specified event are removed. If the method parameter is missing/empty/undefined, the listener[type]() function is used to compare and remove the handler(s).
Parameters:
Name Type Attributes Description
event string Indicates the event to unbind, which can either be:
  • event {string}, the name of the event to unbind. The event name is case-insensitive and may or may not include the 'on' prefix. For example, 'change' is equivalent to 'onchange' and vice versa.
  • event {string}, a string that encloses a shortcut in {}, such as "{Ctrl + A}", to unbind the keyboard shortcut
listener object | callback Defines the listener to remove, which can either be:
  • listener {callback}, a JavaScript callback function that was previously bound to the event (the method parameter has no effect)
  • listener {object}, an object that implements a notification method (e.g., listener[method](oEvent) or listener[type](oEvent)) that was previously used to handle the event
method string <optional>
 Defines an optional case-sensitive string specifying the method on the listener to remove. If not provided, the listener[type]() function is used. This parameter is ignored when the listener is a JavaScript callback function.
Since:
  • 4.4
Example
The following example removes the change event handler from the control:

oBezier.off("change");

where oBezier is an object of Bezier type.

This sample is equivalent to:

oBezier.Listeners.Remove("onchange");

The following example removes all event handlers from the control:

oBezier.off();

where oBezier is an object of Bezier type.

This sample is equivalent to:

oBezier.Listeners.Clear();

or

oBezier.Listeners.Remove();
off

on(event, listener, methodopt) → {object}

The on() method adds an event listener to the specified event or defines a keyboard shortcut. The on() method enables you to listen for events and execute custom code when those events occur, or to define keyboard shortcuts that trigger specific actions within the component. You can use the on() method to enhance the interactivity and functionality of your application by responding to user actions or keyboard inputs. Use the off() method to remove previously bound event handlers or keyboard shortcuts.
Parameters:
Name Type Attributes Description
event string Specifies the event to listen for or a keyboard shortcut, in one of the following forms:
  • If the value is in the "{shortcut}" form (for example, "{Ctrl + A}"), it defines a keyboard shortcut. The callback is triggered when that key combination is pressed. To provide keyboard support for the component, the <canvas> element that hosts it needs to be focusable. To achieve this, you must include the tabIndex attribute in the canvas HTML tag (for example, <canvas tabIndex="0"></canvas>).

    See Shortcuts for more information. (for example, on("{Ctrl + A}", callback)). The shortcut-feature for on/off methods is supported from version 5.0.

  • Otherwise, the value is treated as a standard event name (for example, "change"), and the callback is invoked when that event occurs on the component. The event name is case-insensitive and may or may not include the 'on' prefix. For example, 'change' is equivalent to 'onchange' and vice versa.

    See Listeners for more information. (for example, on("change", callback)).
listener object | callback Defines the listener to add, which can either be:
  • listener {callback}, a JavaScript callback function to handle the event directly (the method parameter has not effect)
  • listener {object}, an object that implements a notification method (e.g., listener[method](oEvent) or listener[type](oEvent)) to handle the event when it occurs
method string <optional>
 Defines an optional case-sensitive string specifying the method on the listener to handle the event. If not provided, the listener[type]() function is used. This parameter is ignored when the listener is a JavaScript callback function.
Since:
  • 4.4
Returns:
Returns the listeners of the specified type, as an exontrol.Arr({callback, thisArg, lock, name, equal}) type, which includes the following new members:
  • type {string}, specifies a case-sensitive string that specifies the type of event to listen for
  • do(event) {callback}, indicates a function that can be invoked to trigger the specified event for all listeners registered for that event type
where:
  • callback {callback}, defines the listener's callback function
  • thisArg {any}, defines the value of this during the listener's callback execution
  • lock {number}, locks or unlocks the invocation of the listener's callback
  • name {string}, defines the name of the callback, mostly used for debugging purposes
  • equal(oCompareListenerCallback) {callback}, indicates a function of callback(oCompareListenerCallback) {boolean} type compares the current object with the provided object. It returns true if the objects contain the same data
Type
object
Example
The following example logs event details when the control is changed:

oBezier.on("change", function(oEvent)
{
  console.log(oEvent);
});

where oBezier is an object of Bezier type.

This sample is quivalent of 

oBezier.Listeners.Add("onchange", function (oEvent)
{
  console.log(oEvent);
});
on

Events

onchange

The onchange() event notifies your application that a bezier control point is changed. The event handler receives an object of {point, bezier} type as a parameter, where the point attribute specifies the index of the control point being changed (1 for P1 or 2 for P2), and the bezier attribute provides a reference to the exontrol.G.Bezier instance where the change occurred. You can use the GetP or GetP1 methods to retrieve the new control points after the change. This event allows you to respond to user interactions with the bezier control points, such as updating related UI elements or triggering other actions in your application when a control point is modified.
Parameters:
Name Type Description
oEvent object Holds information about the bezier control point being changed, as an object of {point, bezier} type.
Properties
Name Type Description
point number A numeric expression that specifies the index of the control point being changed, as 1 for the first control point P1, or 2 for the second control point P2. You can use the GetP, GetP1, method to request for the new control points.
bezier object An exontrol.G.Bezier where the change occurs.
Example
The following samples display the control point once the user changes it:

oBezier.onchange = function (oEvent)
{
 console.log(oEvent);
}

or

oBezier.Listeners.Add("onchange", function (oEvent)
{
 console.log(oEvent);
})

or

oBezier.on("change", function (oEvent)
{
 console.log(oEvent);
})

where oBezier is an object of Bezier type
onchange