!1 !2 IS311 Programming Concepts Abstract Window Toolkit The Abstract Window Toolkit (AWT) package contains all the classes for creating user interfaces and for painting graphics and images. Abstract Window Toolkit (part 1: Drawing Simple Graphics) A user interface object such as a button or scrollbar in AWT terminology is called a component. !3 !4 Graphics The Java Graphics System คลาสAนฐาน+ห-บการเ9ยนภาพกราฟ6ก Java provides a set of graphic commands that allow programmer to: Graphics เ"นคลาส(ใ*+ห-บการวาดภาพ กราฟ6กเ7นลากเ8น เ9ยน;ปทรง?าง ๆ – Display graphical shapes on the screen • size shape location are under programmers control Color Represent a color – Display strings Font Represent a font Graphics Used for painting basic shapes like • size, font, style are under programmers control lines rectangles and for painting FontMetrics Used for determining information images. – Display images Color Represent a color. about a font Font Represents a font. – Color these objects Image Represent an image FontMetrics Used for determining information about a font. – Move these objects Image Represents an image. MediaTracker Used for preloading images. !5 !6 Coordinate Systems Java Graphic Coordinate System Origin (0,0) • Java’s coordinate system is not like the X coordinate system you will use in physics and general math classes • The Origin is in the upper left hand corner • X increases to the right • Y increases downward • The dimensional unit is a pixel Y !7 !8 Java Graphic Coordinate System EXERCISE Each pixel has a coordinate (x,y) Let width and height be odd. What (0,0) (width-1,0) (width-1,height-1) are the coordinates of the middle pixel? x y (0,height-1) !9 !10 SOLUTION Geometry width = 3, height = 3 answer = (1,1) Dimension Used for specifying the size of a rectangle (width and height) answer = ((width-1)/2,(height-1)/2) Insets Used for specifying the insets of a rectangle (top, left, bottom, and right) Point Used for specifying a point x, y coordinates. CาความกEาง และความHงIJาเ"นเลขLละ จะNนวณอQางไร? answer = (#!width / 2$", #!height / 2$") Polygon Used for holding an array of points. answer = (width/2,height/2) Rectangle Used for specifying the location and size of a rectangle (x, y; width; and height). !11 !12 Drawn and Filled Shapes Displaying Things • Java lets you draw lines and shapes • First we need a Graphics context • Java shape drawing methods come in two styles – That portion of the screen to draw upon – those where the outline only is shown • How do we obtain a graphics context? • drawShape() draw(shapeClass) – We get one as the argument to paint() – those where the center is filled • Be careful about passing the graphics context around, • fillShape() fill(shapeClass) – it may not always be 'in context' • Java provides the ability to display predefined • Java is state driven images – Things tend to stay they way they are until they are • Java provides the ability to display widgets changed • Once we set a color it will stay that way !13 !14 Some Graphical things Drawing Lines • Line segments (เ8นตรง) • Connected line segments (ลากเ8นตรงหลายเ8น?อ • The 1.1 AWT provides three methods for drawing lines: เTองUน) – Straight Line Segments • Rectangles (;ปVเหWยม) drawLine(...) • Ellipse (;ปวงX) – Connected Line Segments • Arcs (เ8นโZง) drawPolyline(…) – Portions of an Ellipse • Rectangles with rounded corners (VเหWยม[ม drawArc(…) มล) • Polygon (;ปหลายเหWยม) !15 !16 Line Segments The drawLine method • The command is of the form: GraphicsObject.drawLine(int xStart, int yStart, int xStop, int yStop) • Draws a line from position point (xStart, yStart) to (xStop, yStop) !17 !18 Example of drawLine() Drawing and Filling Rectangles public void paint( Graphics g ){ • Drawing Rectangles void drawRect(int x, // upper left x coordinate g.drawLine( 10, 10, 50, 30 ); int y, // upper left y coordinate int width, // bounding box width } int height) // bounding box height • Draws an outline of a rectangle bounded whose upper left (10,10) hand corner is defined at the point (x,y), and is width wide, and height tall. • To draw a solid rectangle we use the fillRect() method with the same arguments (50,30) !19 !20 The drawRect Method Example Rectangles public void paint(Graphics g) { g.setColor(Color.red); g.drawRect(10,20,50,30); g.setColor(Color.blue); g.fillRect(20,30,75,30); ! fillRect เติมสีลงในสี่เหลี่ยม กําหนด พารามิเตอร์เช่นเดียวกับ drawRect } 50 Wide 75 Wide (10,20) 30 Tall 30 Tall (20,30) 30 Tall !21 !22 Rectangles with Rounded Corners The drawRoundRect method • We can combine our approach for drawing rectangles void drawRoundRect(int x, // First four int y, // parameters and drawing ellipses into a a shape which is a int width, //are as in a rectangle with rounded corners or curved ends. int height,// rectangle • The Java API command drawRoundRect() int arcWidth, combines the complexity of rectangles with the int arcHeight) //horizontal and vertical difficulty of ellipses. // ‘diameter’ at the // at the corners !23 !24 More rounded rectangle stuff The drawRoundRect method • The first four parameters are exactly the same as those for the rectangle. – If we put zeros in for the last two parameters, you will have a rectangle drawn exactly as before. • We use the fifth argument in the drawRoundRect() method as we do the third argument in the drawOval() method. – This describes the horizontal 'diameter' of the arc. • The sixth argument in the drawRoundRect() method corresponds to the fourth argument in the drawOval() method. – This describes the vertical 'diameter' of the arc. • Of course, there is a fillRoundRect() for filling in our rectangle with a solid color. !25 !26 Example Rounded Rectangles Drawing Ellipses public void paint(Graphics g) { g.setColor(Color.blue); g.fillRoundRect(10,20,60,30,5,5); void drawOval(int x, // upper left x coordinate g.setColor(Color.green); int y, // upper left y coordinate g.fillRoundRect(40,30,60,30,15,15); int width, // bounding box width int height) // bounding box height } • This draws an outline of an ellipse bounded by the rectangle whose upper left hand corner is defined at the point (x,y), and is width wide, and Hง 30 pixel height tall. – Note that the point (x,y) does not actually fall on our arc. กEาง 60 pixel !27 !28 The drawOval method Example Ellipses public void paint(Graphics g) { g.setColor(Color.red); (100,20) g.drawOval(10,20,60,30); g.setColor(Color.green); Width 60 Width 30 g.fillOval(100,20,30,30); } (10,20) Height 30 !29 !30 Circles, & Fills Drawing Arcs • The JDK does not provide a method to draw a circle. To • We can draw smooth curves as a portion of an ellipse do that we must set our bounding box to be a square, • The drawArc() command draws an arc bounded by the (the width and the height are the same size). rectangle whose upper left hand corner is defined at the point • To draw a solid, we use the fillOval() method. (x,y), and is width wide, and height tall. The fillOval() takes exactly the same arguments • If we were to draw a complete circle, it would touch the as the drawOval(). centers (midpoints) of each of the sides of our bonding box. – However, we define our curve to be drawn from startAngle to an arc of sweepAngle degrees. !31 !32 Angle Measurements in Java The drawArc method • Angles are measured counter clockwise from the horizontal x axis. void drawArc(int x, // bounding box, x – In Java, 0 degrees is at the 3-o'clock position. – Positive angles indicate counter-clockwise rotations, negative angles are drawn // upper left corner clockwise. int y, // bounding box, y // upper left corner int width, // width of // bounding box int height, // height of 120º // bounding box int startAngle, // in degrees 20º int sweepAngle) // extent [มกราด (sweep angle) X Y สามารถใช้ fillArc()เพื่อระบายเสี้ยวของวงรีได้ !33 !34 The drawArc method Example drawArc() public void paint(Graphics g) { g.drawArc(10,20,30,40,30,80); มุมกราด (Sweep Angle) 80 องศา } (10,20) ความสูง (Height) ของสี่เหลี่ยม สมมติ 40 pixel มุมเริ่มต้น (Start Angle) 30 องศา ความกว้าง (Width) ของสี่เหลี่ยม สมมติ 30 pixel !35 !36 The drawPolyline method Polygons drawPolyline( int[] xPoints, // array of x values • Like the polyline method, this accepts an array int[] yPoints, // array of y values of x's and y's. int nPoints // number of points – However, unlike the polyline method, the polygon ) will create the line that connects the last point in polygon to the first point in the polygon. example • As in the polyline, you must be certain that the int [] xPoints = { 1,2,3,4, 5, 6, 7, 8, 9}; number of points specified is equal to or smaller int [] yPoints = { 3,4,5,7,10,15,20,27,35}; than the smallest number of points in ether of the arrays. g.drawPolyline(xPoints, yPoints, xPoints.length); !37 !38 drawPolygon() Example Polygon • One form of the drawpoly command: public void paint(Graphics g) { void drawPolygon(Polygon p) Polygon poly = new Polygon(); poly.addPoint(10,10); poly.addPoint(20,20); • Uses a polygon object: poly.addPoint(30,10); poly.addPoint(10,20); – We must first create a polygon object: (p, above). g.drawPolygon(poly); – To do this we would declare and instantiate a polygon: } Polygon p = new Polygon(); 2: (30,10) – We then add points to the polygon: 0: (10,10) p.addPoint(x,y); p.translate(dx, dy); ย้ายตําแหน่ง 3: (10,20) 1: (20,20) !39 !40 The drawString method Fonts and Strings void drawString( String s, // string to be drawn • Java provides a flexible system for displaying strings int x, // base line x coordinate – We can change the type face int y // base line y coordinate – We can change the size ) – We can change the weight or style g.drawString(“Hello World!”, 10, 10); !41 !42 Consider the Following Baseline Observations • Notice that nearly all the letters do not extend below an imaginary line String – except the letter 'g'? Base Line • This imaginary line is called the base line.