JavaScript Graphics Library (JSGL.org) Draw and move interactive vector graphics easily in Javascript!

Curve Element (jsgl.elements.CurveElement)

This page documents how the cubic Bezièr curve element can be drawn and manipulated by JSGL.

The class inherits from jsgl.elements.AbstractElement.

The shape of a Bezièr curve in fully determined by a 4-tuple of 2D coordinates:

  1. start point [x,y],
  2. control point #1 [x,y],
  3. control point #2 [x,y],
  4. end point [x,y].

Also, the curve has a stroke object assigned for styling, and can also be filled using a fill object.

UML

jsgl.elements.CurveElement class diagram

Creation

To create a Bezièr curve, use the .createCurve() factory method of a jsgl.Panel object. To make the curve visible, add it to the panel' viewport:

var myCurve = myPanel.createCurve();
myPanel.addElement(myCurve);

The object created is of type jsgl.elements.CurveElement and provides a cross-browser API described below.

Method Summary

Start Point, End Point, Control Points

Setters
setStartX(newX: Number) Sets the new X-coordinate of the starting point of the curve.
setStartY(newY: Number) Sets the new Y-coordinate of the starting point of the curve.
setStartPointXY(newX: Number, newY: Number) Sets the new location of the curve's starting point using couple of real-valued coordinates.
setStartPoint(newPoint: jsgl.Vector2D) Sets the new location of the curve's starting point using a jsgl.Vector2D object.
setControl1X(newX: Number) Sets the X-coordinate of the first control point of the curve.
setControl1Y(newY: Number) Sets the Y-coordinate of the first control point of the curve.
setControl1PointXY(newX: Number, newY: Number) Sets the new location of the first control point of the curve using couple of real-valued coordinates.
setControl1Point(newPoint: jsgl.Vector2D) Sets the new location of the first control point of the curve using a jsgl.Vector2D object.
setControl2X(newX: Number) Sets the X-coordinate of the second control point of the curve.
setControl2Y(newY: Number) Sets the Y-coordinate of the second control point of the curve.
setControl2PointXY(newX: Number, newY: Number) Sets the new location of the second control point of the curve using couple of real-valued coordinates.
setControl2Point(newPoint: jsgl.Vector2D) Sets the new location of the second control point of the curve using a jsgl.Vector2D object.
setEndX(newX: Number) Sets the X-coordinate of the ending point of the curve.
setEndY(newY: Number) Sets the Y-coordinate of the ending point of the curve.
setEndPointXY(newX: Number, newY: Number) Sets the new location of the curve's ending point using a couple of real-valued coordinates.
setEndPoint(newPoint: jsgl.Vector2D) Sets the new location of the curve's ending point using a jsgl.Vector2D object.
Getters
getStartX() : Number Gets the current X-coordinate of the starting point of the curve.
getStartY() : Number Gets the current Y-coordinate of the starting point of the curve.
getStartPoint() : jsgl.Vector2D Gets the current location of the curve's starting point as jsgl.Vector2D object.
getControl1X() : Number Gets the current X-coordinate of the first control point of the curve.
getControl1Y() : Number Gets the current Y-coordinate of the first control point of the curve.
getControl1Point() : jsgl.Vector2D Gets the current location of the first control point of the curve as jsgl.Vector2D object.
getControl2X() : Number Gets the current X-coordinate of the second control point of the curve.
getControl2Y() : Number Gets the current Y-coordinate of the second control point of the curve.
getControl2Point() : jsgl.Vector2D Gets the current location of the second control point of the curve as jsgl.Vector2D object.
getEndX() : Number Gets the current X-coordinate of the ending point of the curve.
getEndY() : Number Gets the current Y-coordinate of the ending point of the curve.
getEndPoint() : jsgl.Vector2D Gets the current location of the curve's ending point as jsgl.Vector2D object.

Stroke, Fill

Stroke Object
getStroke() : jsgl.stroke.AbstractStroke Gets the stroke object that currently defines the line style of the curve.
setStroke(newStroke: jsgl.stroke.AbstractStroke) Sets the stroke object to be used for rendering the curve.
Fill Object
getFill() : jsgl.stroke.AbstractFill Gets the fill object that currently defines the interior of the curve.
setFill(newFill: jsgl.fill.AbstractFill) Sets the fill object to be used for rendering interior of the curve.

Method Detail

setStartX(newX: Number)

Sets the new X-coordinate of the starting point of the curve.

Parameters

Name Type Description
newX Number Real number representing the new X-coordinate of the starting point in pixels.

Example

Seth the X-axis coordinate of the curve's starting point to x=50:

myCurve.setStartX(50);

Since

version 2.0

setStartY(newY: Number)

Sets the new Y-coordinate of the starting point of the curve.

Parameters

Name Type Description
newY Number Real number representing the new Y-coordinate of the starting point in pixels.

Example

Set the Y-axis coordinate of the curve's starting point to Y=150:

myCurve.setStartX(150);

Since

version 2.0

setStartPointXY(newX: Number, newY: Number)

Sets the new location of the curve's starting point using couple of real-valued coordinates.

Parameters

Name Type Description
newX Number A real number that the X-coordinate will be set to.
newY Number A real number that the Y-coordinate will be set to.

Example

Set the curve's starting point to [x=50,y=150]:

myCurve.setStartPointXY(50,150);

Since

version 2.0

</code>

setStartPoint(newPoint: jsgl.Vector2D)

Sets the new location of the curve's starting point using a jsgl.Vector2D object.

The object pass as the argument is copied, hence future changes in it will not affect the behavior of the curve.

Parameters

Name Type Description
newPoint jsgl.Vector2D The new location of the starting point.

Example

Set the new location of the curve's starting point to [x=50,y=150]:

myCurve.setStartPoint(new jsgl.Vector2D(50,150));

Since

version 2.0

getStartX() : Number

Gets the current X-coordinate of the starting point of the curve.

Returns

Number

Example

Move the starting of the curve 10 pixels right:

myCurve.setStartX(myCurve.getStartX()+10);

Since

version 2.0

getStartY() : Number

Gets the current Y-coordinate of the starting point of the curve.

Returns

Number

Example

Move the starting point of the curve 20px up:

myCurve.setStartY(myCurve.getStartY()-20);

Since

version 2.0

getStartPoint() : jsgl.Vector2D

Gets the current location of the curve's starting point as jsgl.Vector2D object.

The object returned is a copy in the curve's internal representation, hence future changes in it will not affect behavior of the circle.

Returns

Example

Make the starting point of myCurve be the same as the starting point of yourCurve:

myCurve.setStartPoint(yourCurve.getStartPoint());

Since

version 2.0

setControl1X(newX: Number)

Sets the X-coordinate of the first control point of the curve.

Parameters

Name Type Description
newX Number Real number representing the new X-coordinate of the first control point in pixels.

Example

Set the X-axis coordinate of the curve's 1st control point to 100:

myCurve.setControl1X(100);

Since

version 1.0

setControl1Y(newY: Number)

Sets the Y-coordinate of the first control point of the curve.

Parameters

Name Type Description
newX Number Real number representing the new Y-coordinate of thefirst control point in pixels.

Example

Set the Y-axis coordinate of the curve's 1st control point to 50:

myCurve.setControl1Y(50);

Since

version 2.0

setControl1PointXY(newX: Number, newY: Number)

Sets the new location of the first control point of the curve using couple of real-valued coordinates.

Parameters

Name Type Description
newX Number A real number that the X-coordinate will be set to.
newY Number A real number that the Y-coordinate will be set to.

Example

Set the 1st control of the curve to [x=100,y=50]:

myCurve.setControl1PointXY(100,50);

Since

version 2.0

setControl1Point(newPoint: jsgl.Vector2D)

Sets the new location of the first control point of the curve using a jsgl.Vector2D object.

Parameters

Name Type Description
newPoint jsgl.Vector2D The new location of the curve's first control point.

Example

Set the 1st control point of the curve to [x=100,y=50]:

myCurve.setControl1Point(new jsgl.Vector2D(100,50));

Since

version 2.0

getControl1X() : Number

getControl1Y() : Number

getControl1Point() : jsgl.Vector2D

setControl2X(newX: Number)

setControl2Y(newY: Number)

setControl2PointXY(newX: Number, newY: Number)

setControl2Point(newPoint: jsgl.Vector2D)

getControl2X() : Number

getControl2Y() : Number

getControl2Point() : jsgl.Vector2D

setEndX(newX: Number)

setEndY(newY: Number)

setEndPointXY(newX: Number, newY: Number)

setEndPoint(newPoint: jsgl.Vector2D)

getEndX() : Number

getEndY() : Number

getEndPoint() : jsgl.Vector2D

getStroke() : jsgl.stroke.AbstractStroke

setStroke(newStroke: jsgl.stroke.AbstractStroke)

getFill() : jsgl.stroke.AbstractFill

setFill(newFill: jsgl.fill.AbstractFill)

 
curve-element.txt · Last modified: 2013/03/18 13:43 by Tomas Rehorek
 
Except where otherwise noted, content on this wiki is licensed under the following license: GNU Free Documentation License 1.3
Driven by DokuWiki Powered by PHP Valid XHTML 1.0 Valid CSS