CanvasSpliner(parentContainer, width, height, splineType)

events:

  • "movePoint" called everytime the pointer moves a point, with argument x and y normalized arrays
  • "releasePoint" called everytime the pointers is released after moving a point, with argument x and y normalized arrays
  • "pointAdded"

Parameters

  • parentContainer :
  • width :
  • height :
  • splineType (default 'natural') :

Instance members

#_drawCoordinates(x, y)

[PRIVATE] Display xy coordinates on the upper left corner

_drawCoordinates(x, y)

[PRIVATE] Display xy coordinates on the upper left corner

Parameters

  • x :
  • y :
#_drawData(curve, control)

[PRIVATE] Draw the data on the canvas

_drawData(curve, control)

[PRIVATE] Draw the data on the canvas

Parameters

  • Boolean curve :

    whether or not we draw the curve

  • Boolean control :

    whether or not we draw the control points

#_drawGrid

[PRIVATE] Draw the background grid

_drawGrid

[PRIVATE] Draw the background grid

#_fillBackground

[PRIVATE] Paint the background with a given color

_fillBackground

[PRIVATE] Paint the background with a given color

#_onCanvasMouseDbclick(evt)

EVENT for when we double click on the canvas

_onCanvasMouseDbclick(evt)

EVENT for when we double click on the canvas

Parameters

  • evt :
#_onCanvasMouseDown(evt)

EVENT for when the mouse is clicked over the canvas

_onCanvasMouseDown(evt)

EVENT for when the mouse is clicked over the canvas

Parameters

  • evt :
#_onCanvasMouseEnter(evt)

EVENT The mouse enters the canvas

_onCanvasMouseEnter(evt)

EVENT The mouse enters the canvas

Parameters

  • evt :
#_onCanvasMouseLeave(evt)

EVENT for when the mouse is leaving the canvas

_onCanvasMouseLeave(evt)

EVENT for when the mouse is leaving the canvas

Parameters

  • evt :
#_onCanvasMouseMove(evt)

EVENT for when the mouse is moving over the canvas

_onCanvasMouseMove(evt)

EVENT for when the mouse is moving over the canvas

Parameters

  • evt :
#_onCanvasMouseUp(evt)

EVENT for when the mouse is released over the canvas

_onCanvasMouseUp(evt)

EVENT for when the mouse is released over the canvas

Parameters

  • evt :
#_onKeyUp(evt)

EVENT A keyboard key is released

_onKeyUp(evt)

EVENT A keyboard key is released

Parameters

  • evt :
#_updateMousePosition(evt)

[PRIVATE] Refresh the position of the pointer we store internally (relative to the canvas)

_updateMousePosition(evt)

[PRIVATE] Refresh the position of the pointer we store internally (relative to the canvas)

Parameters

  • evt :
#add(pt, draw)

Add a point to the collection

add(pt, draw)

Add a point to the collection

Parameters

  • Object pt :

    of type {x: Number, y: Number} and optionnally the boolean properties "xLocked" and "yLocked". x and y must be in [0, 1]

  • draw (default true) :
#constructor(parentContainer, width, height, splineType)

constructor(parentContainer, width, height, splineType)

Parameters

  • Object parentContainer :

    can be a String: the ID of the parent DIV, or can be directly the DOM element that will host the CanvasSpliner

  • Number width :

    width of the canvas where CanvasSpliner draws

  • Number height :

    height of the canvas where CanvasSpliner draws

  • String splineType :

    "natural" or "monotonic"

#draw

Draw the whole canvas

draw

Draw the whole canvas

#getValue(x)

Get a single interpolated value

getValue(x)

Get a single interpolated value

Parameters

  • Number x :

    normalized x (in [0, 1])

Returns

number :

the normalized interpolated value

#getXSeriesInterpolated

Get an array of all the x coordinates that CanvasSpliner computed an interpolation of. See getYSeriesInterpolated to get the corresponding interpolated values.

getXSeriesInterpolated

Get an array of all the x coordinates that CanvasSpliner computed an interpolation of. See getYSeriesInterpolated to get the corresponding interpolated values.

Returns

Array :

of x values with regular interval in [0, 1]

#getYSeriesInterpolated

Get all the interpolated values for each x given by getXSeriesInterpolated.

getYSeriesInterpolated

Get all the interpolated values for each x given by getXSeriesInterpolated.

Returns

Array :

of interpolated y

#on(eventName, callback)

Define an event

on(eventName, callback)

Define an event

Parameters

  • String eventName :

    name of the event. "movePoint", "releasePoint", "pointAdded" or "pointRemoved". They are both called with this in argument

  • callback :
#remove(index)

Remove a point using its index

remove(index)

Remove a point using its index

Parameters

  • Number index :

    index of the point to remove (from left to right, starting at 0)

#setBackgroundColor(color)

Define the canvas background color

setBackgroundColor(color)

Define the canvas background color

Parameters

  • String color :

    must be css style best is of form "rgba(244, 66, 167, 0.5)" Can allso be null/0/false to leave a blank background

#setControlPointColor(state, color)

Set the color of the control point in a specific state

setControlPointColor(state, color)

Set the color of the control point in a specific state

Parameters

  • String state :

    must be one of: "idle", "hovered" or "grabbed"

  • String color :

    must be css style best is of form "rgba(244, 66, 167, 0.5)"

#setControlPointRadius(r)

Change the radius of the control points

setControlPointRadius(r)

Change the radius of the control points

Parameters

  • Number r :

    the radius in pixel

#setCurveColor(state, color)

Set the color of the curve in a specific state

setCurveColor(state, color)

Set the color of the curve in a specific state

Parameters

  • String state :

    must be one of: "idle" or "moving"

  • String color :

    must be css style best is of form "rgba(244, 66, 167, 0.5)"

#setCurveThickness(t)

Define the thickness of the curve

setCurveThickness(t)

Define the thickness of the curve

Parameters

  • Number t :

    thickness in pixel

#setGridColor(color)

Set the color of the grid

setGridColor(color)

Set the color of the grid

Parameters

  • String color :

    must be css style best is of form "rgba(244, 66, 167, 0.5)"

#setGridStep(Number, gs)

Define the grid step in unit coodinate. Default: 0.33

setGridStep(Number, gs)

Define the grid step in unit coodinate. Default: 0.33

Parameters

  • Number :
  • gs :
#setSplineType(splineType)

setSplineType(splineType)

Parameters

  • String splineType :

    "natural" or "monotonic"

#setTextColor(color)

Set the color of the text

setTextColor(color)

Set the color of the text

Parameters

  • String color :

    must be css style best is of form "rgba(244, 66, 167, 0.5)"

PointCollection

Instance members

#add(p)

add(p)

Parameters

  • p :
#getClosestFrom(p)

Get the index within the collection of the point that is the closest from the one given in argument. Returns also the euclidiant distance to this point.

getClosestFrom(p)

Get the index within the collection of the point that is the closest from the one given in argument. Returns also the euclidiant distance to this point.

Parameters

  • p :

Returns

Object :

like {index: Number, distance: Number}, or null if there is no point in this collection.

#getNumberOfPoints

Get the number of points in the collection

getNumberOfPoints

Get the number of points in the collection

Returns

Number :

the number of points

#getPoint(index)

Gets the point at such index

getPoint(index)

Gets the point at such index

Parameters

  • Number index :

    the index of the point we want

Returns

Object :

point that contains at least "x" and "y" properties.

#getXseries

Get all "x" coordinates of the collection as an array of Number

getXseries

Get all "x" coordinates of the collection as an array of Number

Returns

Array :

of Number

#getYseries

Get all "y" coordinates of the collection as an array of Number

getYseries

Get all "y" coordinates of the collection as an array of Number

Returns

Array :

of Number

#remove(index)

Remove the points at the given index.

remove(index)

Remove the points at the given index.

Parameters

  • Number index :

    index of the point to remove

Returns

Object :

the point that was just removed or null if out of bound

#setBoundary(bound, axis, value)

Define the acceptable min and max bot both axis.

setBoundary(bound, axis, value)

Define the acceptable min and max bot both axis.

Parameters

  • String bound :

    can be "min" or "max"

  • String axis :

    can be "x" or "y"

  • Number value :

    a number Note that minimum boudaries are inclusive while max are exclusive

#updatePoint(index, p)

Update the posiiton of an existing point

updatePoint(index, p)

Update the posiiton of an existing point

Parameters

  • Number index :

    index of the existing point to update

  • Object p :

    point that has coord we want to use as new coord. x and y values will be copied, no pointer association

Returns

Number :

new index, the changed point may have changed its index among the x-ordered list