Class: Bezier

Bezier(client, oOptsopt)

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

Requires

  • module:exontrol.commmon.min.js

Classes

Options

Members

(static) version :string

The version field defines the version of the control
Type:
  • string

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

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

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

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

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

GetBezierScale() → {object}

The GetBezierScale() method returns the current scale.
Returns:
Returns an object of {x,y} type that defines the scale.
Type
object

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

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

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

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

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

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

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

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

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

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.

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

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

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