Bezier class | Exontrol Docs

new Bezier(client, oOptsopt)

The ExBezier/JS component displays Bézier curves. The Bézier curves are also used in the time domain, particularly in animation, user interface design and smoothing cursor trajectory in eye gaze controlled interfaces. For example, a Bézier curve can be used to specify the velocity over time of an object such as an icon moving from A to B, rather than simply moving at a fixed number of pixels per step. The ExBezier/JS is a HTML standalone-component, written in JavaScript, that uses no third-party libraries.

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

var oBezier = new Bezier(canvas);

Bezier

Requires

module:exontrol.commmon.min.js

Classes

Options

Members

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 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);
});

where oBezier is an object of Bezier type

Listeners

Shortcuts :exontrol.Sts

The Shortcuts field defines the shortcuts of the control, as an object of exontrol.Sts type. 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

(static) type :string

The type field defines the full-name of the object (the constructor.name does not give the same name for minimized forms). The Bezier.type member always returns "Bezier"

Type:

string

Since:

(static) version :string

The version field defines the version of the control. The current version is 3.0

Type:

string

Methods

AdjustBezierPointToScaleView(oBezierPoint) → {object}

The AdjustBezierPointToScaleView() method adjusts the giving bezier point to fit the current grid-scale. In other words, re-computes the bezier point so it is on a grid-line of the current 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

AdjustBezierPointToScaleView

GetBezierCoord() → {array}

The GetBezierCoord() method gets the current P1 and P2 control points of the bezier.

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

GetBezierCoord

GetBezierP(point) → {object}

The GetBezierP() method returns a specified control point based on its index.

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

GetBezierP

GetBezierScale() → {object}

The GetBezierScale() method returns the current scale.

Returns:

Returns an object of {x,y} type that defines the scale.

Type: object

GetBezierScale

GetCanvas() → {HTMLCanvasElement}

The GetCanvas() method gets the canvas element, the control is running on.

Returns:

Returns the HTMLCanvasElement object the control is running on.

Type: HTMLCanvasElement

GetCanvas

GetClientBezier(client) → {array}

The GetClientBezier() method determines the location to show the bezier curve based on the current options.

Parameters:

Name	Type	Description
`client`	array	An array of [x,y,width,height] type that specifies the control's client area

Returns:

Returns an array of [x,y,width,height] type, that indicates the location where the bezier curve is displayed.

Type: array

GetClientBezier

GetClientRect() → {array}

The GetClientRect() method returns the control's client area.

Returns:

Returns an array of [x,y,width,height] type that specifies the control's client area

Type: array

GetClientRect

GetOption(name) → {any}

The GetOption() method returns the value of specified option.

Parameters:

Name	Type	Description
`name`	string	A string expression that specifies the name of the option to be requested.

Returns:

Returns the option, giving its name.

Type: any

GetOption

GetOptions() → {object}

The GetOptions() method returns the current options of the control, or null if using the default options.

Returns:

An object of Bezier.Options that indicates the options to display the control, or null for default options

Type: object

GetOptions

IncBezierScale(xInc, yInc) → {boolean}

The IncBezierScale() method increases or decreases the current scale by xInc/yInc units. For instance, use this while rotating the mouse wheel.

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

IncBezierScale

SetBezierCoord(P1,)

The SetBezierCoord() method changes the control points of the current bezier object. The SetBezierCoord() could take up to four-parameters and support different types as explained bellow.

Parameters:

Name	Type	Description
`P1,`	any	P2, P3, P4, it supports up to four parameters as explained in the example.

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

SetBezierCoord

SetBezierP(point, value)

The SetBezierP() method changes the coordinates of the specified control point.

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

SetBezierP

SetBezierScale(oBezierScale)

The SetBezierScale() method changes the current scale

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

SetBezierScale

SetCanvas(canvas, localCanvas)

The SetCanvas() method changes the control's canvas where it runs.

Parameters:

Name	Type	Description
`canvas`	any	A string that indicates the indetifier of the element within the document, or a HTMLCanvasElement reference
`localCanvas`	boolean	Specifies whether the canvas is used localy without requesting the canvas to handle the control itself.

SetCanvas

SetClientRect(client)

The SetClientRect() method defines a client area for the control.

Parameters:

Name	Type	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

SetClientRect

SetOptions(oOpts)

The SetOptions() method assigns new options to the control.

Parameters:

Name	Type	Description
`oOpts`	object	An object Bezier.Options to become new options for the control

SetOptions

init(client, oOptsopt)

The init() method initializes the object

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

Since:

init

Events

onchange

The onchange() event notifies your application that a bezier control point is changed.

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 GetBezierP, 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);
})

where oBezier is an object of Bezier type

onchange