Bezier class

Bezier(hostopt, optionsopt)

new Bezier(hostopt, optionsopt)

The ExBezier/JS component displays Bezier curves. Bezier 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 Bezier 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 Bezier curve using drag-and-drop operations.

The component defines the Bezier 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 Bezier 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
host any <optional>
 Specifies the container that hosts the control. The host parameter can be one of the following:
  • {Bezier.Options}, specifies the control's options used to initialize and display the control (only if the options argument is omitted, so only one argument is passed to the constructor). In this case, the control automatically creates its own container element within the document body (@since 5.5)
  • {string}, specifies the identifier of a canvas element within the document, so the container's client area becomes the control's client area
  • {HTMLCanvasElement}, specifies the canvas element that hosts the control, so the container's client area becomes the control's client area

If both host and options arguments are omitted, the control automatically creates its own container element within the document body using the default options.
options Bezier.Options <optional>
 Specifies an object of Bezier.Options type that defines the options used to initialize and display the control. If omitted, default options are used. When the constructor is called with a single argument of object type, that argument is interpreted as the control's options configuration. In this case, no host container is provided, so the control automatically creates and attaches its own container element to the document body, using the provided options for initialization.
Requires:
  • module:exontrol.common.min.js
  • module:exontrol.bezier.min.js
Example
A) The following sample creates and displays a Bezier control with default options (zero-argument form):

         new exontrol.Bezier();

B) The following sample code creates and displays a Bezier control with custom options (one-argument form):

         var oBezier = new exontrol.Bezier(
         {
           coord: "ease",  // {any} defines the control points of the current bezier object
           size: 5 // {number} defines the size of the bezier's curve in pixels
         });

C) The following sample code adds a Bezier control to the giving canvas, and adds a handler for onchange event (two-argument form):

         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.common.min.js
  • module:exontrol.bezier.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.8
Type:
  • string
Example
console.log(exontrol.Bezier.version); // displays the version of the control, for instance "5.2"

(readonly) Canvas :HTMLCanvasElement

The Canvas property returns the HTMLCanvasElement on which the control is currently rendered. It provides direct access to the underlying canvas, which can be useful when you need to interact with it at a low level. Through this property, you can also obtain the canvas rendering context and perform custom drawing using the standard Canvas API. When resizing the canvas, it is recommended to use exontrol.CC.Resize(<canvas>, [width], [height]) to properly adjust and refresh the control. Failing to do so may result in the control's content being cleared or lost.
Type:
  • HTMLCanvasElement
Since:
  • 5.5
Example
exontrol.CC.Resize(oBezier.Canvas, 800, 600), resizes the control to 800x600 pixels and refreshes it
Canvas

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 Bezier 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 Bezier 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

CopyTo(filename, options) → {Promise}

The CopyTo method copies the content of the control to a specified destination, such as the clipboard, a Blob object, or an image file (PNG, JPEG, or WebP). The operation is fully customizable, allowing you to control the output format and behavior. You can also provide callbacks that prepare the control before the copy operation and restore it afterward, making the entire export process highly flexible and customizable. The CopyTo method fails if the image to be copied is larger than the maximum size allowed by the browser. The maximum size varies depending on the browser and device, and it may be affected by factors such as available memory and screen resolution. The catch() method of the Promise returned by CopyTo can be used to handle any errors that occur during the copy operation, including cases where the image exceeds the maximum size allowed by the browser.
Parameters:
Name Type Description
filename string | object Specifies the filename for the exported content or an object containing options for the copy operation. If a string is provided, it is treated as the filename; if an object is provided, it can contain various options for the copy operation.
options object Indicates an object containing options for the copy operation, such as the destination type (e.g., Blob, file), filename, and any additional settings. If the filename is provided as a string, this parameter can be omitted, and the options can be specified directly in the object.
Properties
Name Type Description
background string Specifies the background color to use when exporting the content. This can be a string representing a valid CSS color value (e.g., "#FFFFFF" for white, "rgba(0, 0, 0, 0.5)" for semi-transparent black). If not provided, the background will be white by default. The background color will be applied to the exported content, and it can be used to fill any transparent areas in the control's view. If "" is specified, the background will be transparent.
blob boolean Specifies whether to copy the content to a Blob object. If set to true, the content will be copied to a Blob; if false, it will be copied to a file. The default value is false, which means the content will be copied to a file. If the blob option is set to true, the filename option will be ignored, and the content will be returned as a Blob object.
clipboard boolean Specifies whether to copy the content to the clipboard. If set to true, the content will be copied to the clipboard; if false, it will not be copied to the clipboard. The default value is false, which means the content will not be copied to the clipboard. You can combine this option with the blob option to copy the content to both a Blob object and the clipboard, and so no file will be created.
filename string Specifies the filename for the exported content. This can be a string representing the desired filename, including the file extension (e.g., "orchart.png"). If not provided, a default filename such as "export.png" will be used. The extension of the filename can also be used to determine the format of the exported content as one of the following:
  • "png", specifies the PNG format for the exported content
  • "jpeg", specifies the JPEG format for the exported
  • "webp", specifies the WebP format for the exported content
The extension format can be any of types the canvas's toBlob() method supports, such as "image/png", "image/jpeg", or "image/webp". If the filename is not provided, a default filename such as "export.png" will be used.
before callback Specifies a callback function that is called before the copy operation begins. This function can be used to prepare the control for export, such as resizing the canvas or hiding scrollbars. The callback receives the control as its context (this) and should return an object containing the original state of the control, which will be passed to the after callback.
after callback Specifies a callback function that is called after the copy operation is completed. This function can be used to restore the control to its original state, such as resizing the canvas back to its original size and restoring scrollbars. The callback receives the control as its context (this) and the object returned from the before callback as its argument.
size callback Specifies a callback function that is called to determine the size of the control for the copy operation. This function should return an object of {w, h} type containing the width and height of the control, which will be used to resize the canvas for export. The callback receives the control as its context (this).
save callback Specifies a callback function that is called at the start of the copy operation to perform any additional setup or initialization before the copy operation begins. This function can be used to perform any additional setup or initialization before the copy operation begins. The callback receives the control as its context (this). The result of this callback is passed to the restore callback as an argument. For instance, you can filter for a few items at the start of the copy operation and restore them at the end of the copy operation through the restore callback.
restore callback Specifies a callback function that is called at the end of the copy operation to perform any additional cleanup or restoration after the copy operation is completed. This function can be used to restore the control to its original state. The callback receives the control as its context (this) and the result of the save callback as its argument.
Since:
  • 5.8
Returns:
Returns a Promise that resolves when the copy operation completes, providing the resulting Blob or the specified destination. You can use "then" or catch methods of the Promise to handle the result or any errors that occur during the copy operation as explained bellow:
  • The then method of the Promise can be used to handle the result of the copy operation, such as displaying the exported content in an image element or saving it to a file.
  • The catch method of the Promise can be used to handle any errors that occur during the copy operation, including cases where the image exceeds the maximum size allowed by the browser. For instance, "Failed to export the canvas to PNG format (width x height)" error may occur if the image to be copied is larger than the maximum size allowed by the browser. The maximum size varies depending on the browser and device, and it may be affected by factors such as available memory and screen resolution. Generally, the maximum size is around 32,767 pixels in width or height for most modern browsers, but it can be lower on some devices or older browsers. If this error occurs, you should reduce the size of the content being exported or consider exporting it in smaller sections to avoid exceeding the maximum size limit.
Type
Promise
Example
oBezier.CopyTo(), copies the content of the control to the clipboard and returns the blob object of the exported content (as a Promise)
oBezier.CopyTo('bezier.png'), copies the content of the control to a file named "bezier.png" and returns the blob object of the exported content (as a Promise)

The following sample shows how to use the CopyTo method with save and restore callbacks to export the control without the lines that allow users to modify the control points:

 oBezier.on("{CTRL + S}", function(oEvent)
 {
   oBezier.CopyTo(
   {
     save: function()
     {
       var oRestore = {readOnly: oBezier.Options.readOnly};
       oBezier.Options = {readOnly: true};
       return oRestore;
     },
     restore: function(oRestore)
     {
       oBezier.Options = {readOnly: oRestore.readOnly};
     }
   })
 });

The following sample code shows how to extract the blob object of the exported content and display it in an image element (blobImg):

oBezier.CopyTo('bezier.png')
  .then(function(oBlob)
  {
    var oImg = document.getElementById('blobImg');
    if ( oImg )
    {
      if (oImg.dataset.objectUrl)
        URL.revokeObjectURL(oImg.dataset.objectUrl);
      oImg.src = URL.createObjectURL(oBlob);
      oImg.dataset.objectUrl = oImg.src;
    }
  });

The following sample code shows how you can handle any errors that may occur during the copy operation by using the catch method of the Promise returned by the CopyTo method:

oBezier.CopyTo()
  .catch(function(oError)
  {
    console.log(oError);
  });      

where oBezier is an instance of the Bezier control.
CopyTo

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 Bezier 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 Bezier 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
Example
oBezier.IncScale(2, 3); // increases the current scale of the bezier by 2 units on the x-axis and 3 units on the y-axis
IncScale

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 Bezier 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

(static) 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

(static) 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