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.

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.

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

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

myCurve.setStartX(50);

version 2.0

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

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

myCurve.setStartX(150);

version 2.0

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

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

myCurve.setStartPointXY(50,150);

version 2.0

</code>

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.

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

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

version 2.0

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

Number

Move the starting of the curve 10 pixels right:

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

version 2.0

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

Number

Move the starting point of the curve 20px up:

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

version 2.0

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.

jsgl.Vector2D

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

myCurve.setStartPoint(yourCurve.getStartPoint());

version 2.0

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

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

myCurve.setControl1X(100);

version 1.0

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

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

myCurve.setControl1Y(50);

version 2.0

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

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

myCurve.setControl1PointXY(100,50);

version 2.0

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

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

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

version 2.0