Mastering JavaFX 10
上QQ阅读APP看书,第一时间看更新

Curves

Arc is a piece of the ellipse. It has the extra startAngle and length properties compared to Ellipse. Both these parameters are measured in degrees, ranging from 0 to 360.

The following is an example of an ellipse and a similar arc with a length of 180 degrees:

// chapter2/shapes/ArcAndEllipse.java
Ellipse ellipse = new Ellipse();
ellipse.setRadiusX(60);
ellipse.setRadiusY(40);
ellipse.setFill(Color.DARKGREY);

Arc arc = new Arc();
arc.setRadiusX(60);
arc.setRadiusY(40);
arc.setFill(Color.DARKGREY);
arc.setStartAngle(45);
arc.setLength(180);

QuadCurve and CubicCurve represent quadratic and cubic Bezier parametric curves. This is a popular method for modeling a smooth curve. 

To draw a QuadCurve, you need to set a start point, an end point, and a control point for the curve. After that, JavaFX will draw a curve by shifting tangent with vertexes on the lines from the start point to the control point, and from the control point to the end point. 

It's easier than it sounds—luckily, we have a powerful JavaFX API, so I've created a small animation, demonstrating how it works. In the next screenshot, the gray area is a QuadCurve, the two black lines connect the start, end, and control points, and the red line is a moving tangent:

The actual sample is animated, but I'll provide only the curve code for it; see Chapter 5Animation, for the details about the animation API. Take a look at the following code snippet:

// chapter2/shapes/AnimatedQuadCurve.java
QuadCurve quad = new QuadCurve();
quad.setStartX(50);
quad.setStartY(200);
quad.setEndX(250);
quad.setEndY(200);
quad.setControlX(275);
quad.setControlY(20);
quad.setFill(Color.DARKGRAY);

// two lines connecting start, end and control points
Polyline lines = new Polyline(
quad.getStartX(), quad.getStartY(),
quad.getControlX(), quad.getControlY(),
quad.getEndX(), quad.getEndY());

// bold tangent line
Line tangent = new Line(quad.getStartX(), quad.getStartY(), quad.getControlX(), quad.getControlY());
tangent.setStroke(Color.RED);
tangent.setStrokeWidth(2);

CubicCurve is a step up from QuadCurve and has two control points:

CubicCurve cubic = new CubicCurve();
cubic.setStartX(50.0);
cubic.setStartY(200.0);
cubic.setControlX1(75.0);
cubic.setControlY1(30.0);
cubic.setControlX2(135.0);
cubic.setControlY2(170.0);
cubic.setEndX(250.0);
cubic.setEndY(190.0);
cubic.setFill(Color.DARKGRAY);

Polyline lines = new Polyline(
cubic.getStartX(), cubic.getStartY(),
cubic.getControlX1(), cubic.getControlY1(),
cubic.getControlX2(), cubic.getControlY2(),
cubic.getEndX(), cubic.getEndY());

By having two control points you can create a shape with an uneven curve: