Software System Components 1 Graphics

Transcription

1 Software System Components 1 Graphics Shan He LECTURE 3 Introduction to Java 2D Graphics (II) 1.1. Outline of Lecture Review of what we learned Rendering Shapes 1.2. Review of what we learned Last lecture, we have learned how to use Java 2D classes to construct geometric primitives, e.g., lines, curves, rectangles, ellipses, polygons and areas. As we mentioned before, the rendering step, e.g., filling colour, is separated from the construction of geometric primitives. In this class, we will introduce how to do the rendering using Java Graphics2D class. We will give the theories behind rendering process in Lecture Rendering Shapes Graphics2D also provides more sophisticated control about how these text, shapes, or images appear on the screen. The Java 2D rendering process is controlled by the Graphics2D object and its state attributes, such as line styles, colour, and transformations. As we have seen before, these state attributes are global attributes, which will be applied to graphic objects when they are rendered. In Graphics2D, the collection of state attributes is called Graphics2D context. To render Graphics2D 1

2 2 SHAN HE, SOFTWARE SYSTEM COMPONENTS 1 GRAPHICS objects, e.g., shapes, the first step is to set up the Graphics2D context by adding different state attributes to it; and then call one of the Graphics2D rendering methods, such as draw or fill. Here are three state attributes we could add to the context for rendering: Paint attribute: Choose colours and patterns for shapes. Stroke attribute: Stroke width and how strokes are joined together. Rendering hints: Control quality and speed of rendering output. We will go into details of these state attributes Paint attribute This paint attribute, also called fill attribute, enables you to fill shapes with solid colors, gradients (gradient fill gradually combining two colors), and patterns (tiled image). This attribute is represented by a Paint object, which can be created from java.awt.paint interface. When you fill a Shape, the current Paint attribute of the Graphics2D object is used. We have seen how to fill colour in our previous examples. We can also use GradientPaint to fill an area with a colour gradient: GradientPaint(Point2D p1, Color colour1, Point2D p2, Color colour2, boolean cyclic) You need to specify two coordinates, p1 and p2, and two colours, colour1 and colour2, then the graphics engine smoothly interpolates between the two colours across the region between the two points. We can also set the gradient colour as cyclic or acyclic. If the gradient is cyclic then the points on the extended p1, p2 connecting line cycle back and forth between the colors colour1 and colour2. Here is an example of filling gradients GradientPaint int startx = 20; int starty = 20; Point2D p1 = new Point2D.Double(startX, starty); Point2D p2 = new Point2D.Double(startX+20, starty); g2.setpaint(new GradientPaint(p1, Color.black, p2, Color.white, true));

3 LECTURE 3. INTRODUCTION TO JAVA 2D GRAPHICS (II) 3 Figure 1. The ellipse on the left is filled with a single colour. The ellipse on the right is filled with a colour gradient from red to yellow. We can also use TexturePaint to fill a Shape with a tiled image by defining a BufferedImage and a Rectangle2D. The graphics engine maps the image into the rectangle (possible do some scaling if necessary) and then tiles the rectangle across the shape to be painted. Therefore, we need to create a BufferedImage object using java.awtimage.bufferedimage subclass. It worth mentioning that we could load a image, e.g., JPG file to BufferedImage. Please find out yourself how to do this. It might be useful for your continuous assessment Stroke attributes Stroke attributes determine how the outline of a specific shape or text is drawn, e.g., an unbroken line of varying thickness or a dashed line with variable spaces. To define the stroke attributes for a Graphics2D context, you need to use a BasicStroke object, which defines characteristics such as the line width, end cap style, segment join style, and the dashing pattern: BasicStroke(float penwidth, int capstyle, int joinstyle) Then you call setstroke to set or change the Stroke attribute in the Graphics2D context. For example, the following code makes a circular cap centered on the endpoint, with a diameter of the pen width as shown in Figure 2 C. Double startx = 10.0; Double starty = 30.0; Line2D line1 = new Line2D.Double(startX,startY,50,startY);

4 4 SHAN HE, SOFTWARE SYSTEM COMPONENTS 1 GRAPHICS BasicStroke stroke = new BasicStroke(25, BasicStroke.CAP_ROUND, BasicStroke.JOIN_BEVEL); g2.setstroke(stroke); g2.setcolor(color.blue); g2.draw(line1); A) CAP_SQUARE B) CAP_BUTT C) CAP_ROUND Figure 2. Different end cap styles. We can also define different segment join styles as shown in 4. A) JOIN_MITER B) JOIN_BEVEL C) JOIN_ROUND Figure 3. Different segment join styles. We can also define dashing pattern of the outline of a specific shape or text. Here is an example: BasicStroke stroke = new BasicStroke(4.0f,// Width BasicStroke.CAP_SQUARE, // End cap BasicStroke.JOIN_MITER, // Join style 10.0f, // Mitre limit new float[] {16.0f,20.0f}, // Dash pattern

5 LECTURE 3. INTRODUCTION TO JAVA 2D GRAPHICS (II) 5 0.0f); // Dash phase Mitre limit option will keeps a mitre from extending out an unreasonable length when two lines forming a small angle. The dash pattern is an array of floating point numbers that specify first the length of the dashed line, followed by the length of the space. If necessary, the dash and space values specified will repeat themselves. The dash phase allows an offset, or phase, into the line as a distance that the pattern should begin. We can define very complex dashing pattern. The following is an example Figure 4. Dashing line pattern Rendering Hints In Java Graphics, if we need to control quality and speed of output, we can choose different algorithms, e.g., line drawing algorithms and anti-aliasing algorithms, used by other classes which perform rendering and image manipulation services. This is done by defining and managing collections of keys and associated values of RenderingHints class. There are a lot of options you can set. The main ones are: Antialiasing default, on, or off Color rendering default, quality, or speed Interpolation can be set to nearest-neighbour, bilinear, or bicubic. Rendering default, quality, or speed Text antialiasing default, on, or off We can test the antialiasing option. As we can see from Figure 5, anti-aliasing smooths jagged edges by blurring them Exercise Exercise 1. Please use the dashing pattern and join round style to draw a vase. You could reuse your code for Exercise 2 in Lecture 2

6 6 SHAN HE, SOFTWARE SYSTEM COMPONENTS 1 GRAPHICS A) Without anti-aliasing B) With anti-aliasing Figure 5. Comparison between rendering without and with antialiasing. Exercise 2. Please draw a heart and fill in a GradientPaint of red and black. You could reuse your code for Exercise 4 in Lecture 2