5 Drawing Stuff in 2D

Transcription

1 16 Advanced Java for Bioinformatics, WS 17/18, D. Huson, November 6, Drawing Stuff in 2D The scene graph is a tree whose nodes are layout items, controls and, as we will see, graphic objects. JavaFX has full knowledge of the scene graph and analyses it to generate appropriate calls to basic drawing methods to render the scene. You, as a programmer, focus on setting up the scene graph and JavaFX takes care of rendering the scene for you. In contrast, Swing uses the immediate rendering model in which you, as a programmer, are handed a Graphics object that provides basic drawing methods that you must use to draw the scene directly. For example: This requires the following code in public void paint ( Graphics g ) { g. drawline ( 1 5, 1 5, 2 1 5, 1 5 ) ; // s t a r t. x, s t a r t. y, end. x, end. y g. drawline ( 1 1 5, 1 5, 1 1 5, ) ; g. f i l l O v a l ( 1 0, 1 0, 1 0, 1 0 ) ; // x, y, width, h e i g h t g. f i l l O v a l ( 1 1 0, 1 0, 1 0, 1 0 ) ; g. f i l l O v a l ( 2 1 0, 1 0, 1 0, 1 0 ) ; g. f i l l R e c t ( 1 1 0, 1 1 0, 1 0, 1 0 ) ; } If you really need to use the immediate rendering model, then this can be done in JavaFX using the Canvas class, as we will discuss later. However, our main focus is on using the scene graph to setup the scene and we will leave rendering to JavaFX. In JavaFX, we can create shapes and add them to the scene graph. Example: This is based on the following code in JavaFX: C i r c l e c i r c l e 1=new C i r c l e ( 1 0, 1 0, 5 ) ; C i r c l e c i r c l e 2=new C i r c l e ( 1 1 0, 1 0, 5 ) ; C i r c l e c i r c l e 3=new C i r c l e ( 2 1 0, 1 0, 5 ) ; Rectangle r e c t a n g l e=new Rectangle ( 1 0, 1 0 ) ; r e c t a n g l e. setx ( ) ;

2 Advanced Java for Bioinformatics, WS 17/18, D. Huson, November 6, r e c t a n g l e. sety ( ) ; Line l i n e 1=new Line ( 1 0, 1 0, 2 1 0, 1 0 ) ; Line l i n e 2=new Line ( 1 1 0, 1 0, 1 1 0, ) ; Pane pane=new Pane ( ) ; pane. getchildren ( ). addall ( l i n e 1, l i n e 2, c i r c l e 1, c i r c l e 2, c i r c l e 3, r e c t a n g l e ) ; Scene scene=new Scene ( pane, 2 5 0, ) ; 5.1 Shapes JavaFX provides a number of extensions of the class Shape extends Node, which represent two dimensional shapes Rectangles The class Rectangle represents a rectangle: x,y width height It has the specific properties x, y, width and height. It has a number of additional properties that are common to most shapes: fill - the fill color stroke - the stroke color strokewidth - the stroke width It also has node properties that modify the location, scale etc.: translatex translatey translatez scalex Circles and ellipses The Circle class has the specific properties: radius, centerx and centery. The Ellipse class has the specific properties:

3 18 Advanced Java for Bioinformatics, WS 17/18, D. Huson, November 6, 2017 radiusx, radiusy, centerx and centery. radiusy centerx,centery radiusx Union, intersect and subtract A shape can be defined as the union of two shapes: C i r c l e c i r c l e 1=new C i r c l e ( 1 1 0, 1 1 0, 8 0 ) ; C i r c l e c i r c l e 2=new C i r c l e ( 2 1 0, 1 1 0, 3 0 ) ; Shape union=shape. union ( c i r c l e 1, c i r c l e 2 ) ; union. s e t F i l l ( Color.TRANSPARENT) ; union. s e t S t r o k e ( Color.BLACK) ; The result: A call to Shape.intersection(circle1,circle2) produces this: A call to Shape.subtract(circle1,circle2) produces this:

4 Advanced Java for Bioinformatics, WS 17/18, D. Huson, November 6, Line The Line class respresents a straight line. It specific properties are: startx, starty, endx and endy. There are other properties, here are some of the most commonly used ones: strokewidth strokelinecap, possible values: ROUND SQUARE BUTT strokedasharray, e.g.: 5, 3 specifies that 5 pixels of line are followed by 3 pixels of space PolyLine A PolyLine represents a path of straight lines, setup as follows: PolyLine polyline=new PolyLine(a 0,a 1,a 2,...,a ( 2k 1), where k > 1 is the number of points and k 1 is the number of lines. For example, polyline=new Polyline(10,10,20,100,200,30,220,110); looks like this: One additional property that a polyline has is

5 20 Advanced Java for Bioinformatics, WS 17/18, D. Huson, November 6, 2017 strokelinejoin - determines the shape of the joint between two consecutive line segments Polygon A Polygon is a closed poly-line for which the fill property can be set. For example, polygon=new Polygon(10,10,20,100,200,30,220,110); polygon.setfill(color.lightgray); polygon.setstroke(color.black); looks like this: Arc An Arc is a segment from an ellipse. The ellipse is defined using these properties: centerx, centery, radiusx and radiusy. The segment is then defined using these properties: startangle in degrees length - the angular extent in degrees length startangle type, one of these: ArcType.ROUND ArcType.CHORD ArcType.OPEN QuadCurve A QuadCurve represents a quadratic Bézier curve, specified by three points, the start point, a control point and the end point.

6 Advanced Java for Bioinformatics, WS 17/18, D. Huson, November 6, The control point determines the direction of the curve as it leaves the start point and as it enters the end point. The key properties are: startx, starty controlx, controly endx, endy Here is an example that uses quadratic curves in the display of a phylogenetic tree. The control points are shown as red dots: CubicCurve The class CubicCurve represents cubic B ezier curves. control points and an end point. These have four points, a start point, two The two control points determine the direction in which the curve leaves and enters the start and end, and the convex hull of the four points contains the total curve. The key properties are: startx, starty controx1, controly1 controx2, controly2 endx, endy Here is an example that uses cubic curves. The control points are shown as red and black dots:

7 22 Advanced Java for Bioinformatics, WS 17/18, D. Huson, November 6, Path A more general Path can be built from individual types of lines using the following classes: ArcTo ClosePath CubicCurveTo HLineTo LineTo MoveTo QuadCurveTo VLineTo In the below modified example for cubic curves, some edges of the phylogenetic tree consist of two parts, a cubic curve followed by a straight line, as highlighted: This is the code that is used to draw each such edge in the tree:

8 Advanced Java for Bioinformatics, WS 17/18, D. Huson, November 6, f i n a l MoveTo moveto = new MoveTo( s t a r t. getx ( ), s t a r t. gety ( ) ) ; f i n a l CubicCurveTo cubiccurveto = new CubicCurveTo ( c o n t r o l 1. getx ( ), c o n t r o l 1. gety ( ), c o n t r o l 2. getx ( ), c o n t r o l 2. gety ( ), support. getx ( ), support. gety ( ) ) ; f i n a l HLineTo hlineto = new HLineTo ( end. getx ( ) ) ; edgeshape = new Path ( moveto, cubiccurveto, hlineto ) ; SVGPath An even more general approach for generating paths is provided by the class SVGPath. This allows one to use SVG specification strings to define a path, as produced by some interactive graphics tools Text A Text object displays text. Its properties include: X and Y font wrappingwidth in pixels underline bold... textaligment such as TextAlignment.LEFT Here is some code for setting up a Text object: Text t e x t=new Text ( B e z i e r curves are widely used i n computer g r a p h i c s to model smooth curves. \ n + As the curve i s completely contained i n the convex h u l l o f i t s c o n t r o l points, \ n + the p o i n t s can be g r a p h i c a l l y d i s p l a y e d and used to manipulate the curve i n t u i t i v e l y. \ n ) ; t e x t. setx ( 2 0 ) ; t e x t. sety ( 2 0 ) ; t e x t. setfont ( Font. f o n t ( Courier New ) ) ; This is the result: Good practice Put all shapes that belong together into a group, (for example, in a phylogenetic tree, a node might be represented by a circle and have an associated label) and then use properties of the group to translate, scale and rotation the collection of shapes. These groups themselves should be placed into higher-level groups when appropriate.