TOC

Java Programming Drawing shapes

Drawing complex shapes

Throughout this chapter, we will refer to the process of creating Graphical content with code as either drawing or painting. However, Java officially recognizes the latter as the proper word for the process, but we will differentiate between the two later on.

Now, the main class that you would be needing would, without doubt, be theGraphics class. If you take a closer look at the method that we used in theIdentifying the acquisition of theGraphics class in our code

Code listing 9.3: A basic canvas importjava.awt.*;importjavax.swing.*;publicclassMyCanvasextendsCanvas{publicMyCanvas(){}publicvoidpaint(Graphicsgraphics){/* We would be using this method only for the sake * of brevity throughout the current section. Note * that the Graphics class has been acquired along * with the method that we overrode. */}publicstaticvoidmain(String[]args){MyCanvascanvas=newMyCanvas();JFrameframe=newJFrame();frame.setSize(400,400);frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);frame.getContentPane().add(canvas);frame.setVisible(true);}}

To view the contents of theGraphics class, please check theexternal links at the bottom of the page for links to the online API.

To start off your drawing experience, consider drawing the most basic shape — a line. A canvas when viewed upon with regards to drawing routines can be expressed as an invertedCartesian coordinate system. A plane expressed by an x- and a y-axis. The origin point or${\displaystyle (0,0)}$ being the top-left corner of a canvas and the visible area of the canvas being theCartesian quadrant I or the positive-positive(+,+) quadrant. The further you go down from the top, the greater the value of y-coordinate on the y-axis, vice-versa for the x-axis as you move toward the right from the left. And unlike the values on a normal graph, the values appear to be positive. So a point at${\displaystyle (10,20)}$ would be 10 pixels away from the left and 20 pixels away from the top, hence the format${\displaystyle (x,y)}$.

Now, we already know that a line is a connection of two discreet points atop a canvas. So, if one point is at${\displaystyle (x1,y1)}$ and the other is at${\displaystyle (x2,y2)}$, drawing a line would require you to write a syntax like code below. For the sake of brevity, we will skim out the rest of the method unused in the example.

Code section 9.4: Drawing a simple line form ...publicclassMyCanvasextendsCanvas{...publicvoidpaint(Graphicsgraphics){graphics.setColor(Color.black);graphics.drawLine(40,30,330,380);}...}

In the above example, a simple method is used to define precisely where to place the line on the Cartesian scale of the canvas. ThedrawLine(int,int,int,int) asks you to put four arguments, appearing in order, thex1 coordinate, they1 coordinate, thex2 coordinate and they2 coordinate. Running the program will show a simple black line diagonally going across the canvas.

We now proceed on to our second drawing. A simple rectangle would do it justice, see below for code.

Code section 9.5: Drawing a simple rectangle ...publicclassMyCanvasextendsCanvas{...publicvoidpaint(Graphicsgraphics){graphics.drawRect(10,10,100,100);}...}

In the above example, you see how easy it is to draw a simple rectangle using thedrawRect(int, int, int, int) method in theGraphics instance that we obtained. Run the program and you will see a simple black outline of a rectangle appearing where once a blank canvas was.

The four arguments that are being passed into the method are, in order of appearance, thex-coordinate, they-coordinate,width and theheight. Hence, the resultant rectangle would start painting at the point on the screen 10 pixels from the left and 10 from the top and would be a 100 pixel wide and a 100 pixel in height. To save the argument here, the above drawing is that of a square with equal sides but squares are drawn using the same method and there is no such method asdrawSquare(int, int, int)

You can change the color of the outline by telling theGraphics instance the color you desire. This can be done as follows:

Code section 9.6: Changing the outline color of the rectangle ...publicclassMyCanvasextendsCanvas{...publicvoidpaint(Graphicsgraphics){graphics.setColor(Color.red);graphics.drawRect(100,100,500,500);}...}

Running the program would render the same rectangle but with a red colored outline.

For the purposes of bringing color to our drawing, we used a method namely thesetColor(Color) method. This method comes into force for all the drawing made after its call until another color is set. It asks for an argument of typeColor. Now because you have no idea of how to actually instantiate aColor class, the class itself has a few built-in colors. Some built-in colors that you can use are mentioned below.

• Color.red
• Color.blue
• Color.green
• Color.yellow
• Color.pink
• Color.black
• Color.white

Try running the program while coding changes to colors for a different colored outline each time. Play around a bit with more colors. Look for the Color class API documentation in theexternal links at the bottom of the page.

Up until now, you have been able to draw a simple rectangle for yourself while asking a question silently, "why is the outline of the rectangle being painted rather the area as a whole?" The answer is simple. Any method that starts withdrawXxxx(...) only draws the outline. To paint the area within the outline, we use thefillXxxx(...) methods. For instance, the code below would fill a rectangle with yellow color while having a red outline. Notice that the arguments remain the same.

Code section 9.7: Drawing a yellow rectangle with a red outline ...publicclassMyCanvasextendsCanvas{...publicvoidpaint(Graphicsgraphics){graphics.setColor(Color.yellow);graphics.fillRect(10,10,100,100);graphics.setColor(Color.red);graphics.drawRect(10,10,100,100);}...}

Drawing a circle is ever so easy? It is the same process as the syntax above only that the wordRect is changed to the wordOval. And don't ask me why oval? You simply don't have the methoddrawCircle(int, int, int) as you don't havedrawSquare(int, int, int). Following is the application of Graphics code to draw a circle just to whet your appetite.

Code section 9.8: Drawing a white circle with a blue outline ...publicclassMyCanvasextendsCanvas{...publicvoidpaint(Graphicsgraphics){graphics.setColor(newColor(0,0,255));graphics.drawOval(50,50,100,100);}...}

Simple so far, isn't it? Of all the shapes out there, these two are the only shapes that you'd need to build for the moment. Complex graphics routines are required to build shapes like a rhombus, triangle, trapezium or a parallelogram. We would be tackling them later on in another section. However, on a last note I would leave you with another interesting shape - a combination of both ovals and rectangle. Think a rectangle with rounded corners, a Rounded Rectangle (RoundRect).

Code section 9.9: Drawing a pink rounded rectangle with a red outline ...publicclassMyCanvasextendsCanvas{...publicvoidpaint(Graphicsgraphics){graphics.setColor(Color.pink);graphics.fillRoundRect(10,10,100,100,5,5);graphics.setColor(Color.red);graphics.drawRoundRect(10,10,100,100,5,5);}...}

Notice that the syntax of thedrawRoundRect(int, int, int, int, int, int) method is a bit different than the syntax for the simple rectangle drawing routinedrawRect(int, int, int, int). The two new arguments added at the end are thewidth of the arc in pixels and theheight of the arc in pixels. The result is pretty amazing when you run the program. You don't need to squint your eyes to tell that the corners of the rectangle are slightly rounded. The more the values of the width and height of the arcs, the more roundness appears to form around the corner.

Sometimes people ask, after creating simple programs like the ones above, questions like:

• Why did I have to tell theGraphics instance the color before each drawing routine? Why can't it remember my choice for the outlines and for the fill colors? The answer is simpler than it seems. But, to fully understand it, we need to focus on one little thing called theGraphics Context. The graphics context is the information that adheres to a single instance of theGraphics class. Such an instance remembers only one color at a time and that is why we need to make sure the context knows of the color we need to use by using thesetColor(Color) method.
• Can I manipulate the shapes, like tilt them and crop them? Hold your horses, cowboy! Everything is possible in Java, even tilting and cropping drawings. We will be focusing on these issues in a later section.
• Is making shapes like triangles, rhombuses and other complex ones tedious? Well, to be honest here, you need to go back to your dusty book cabinet and take out that High School Geometry book because we would be covering some geometry basics while dealing with such shapes. Why not read awikibook on Geometry?

...publicvoidpaint(Graphicsgraphics){graphics.setColor(Color.red);graphics.drawRect(10,10,100,100);graphics.setColor(Color.yellow);graphics.fillRect(10,10,100,100);}...

If you have any questions regarding the content provided here, please feel free to comment in this page'sdiscussion.

• Locate the Graphics class in the online Java API documentation
• Locate the Color class in the online Java API documentation

TOC

Java Programming Drawing shapes

Drawing complex shapes

• Book:Java Programming
• Book:Java Programming/Graphics

• Pages using the JsonConfig extension
• Pages with deep filing