Basic GUI Drawing Drawing models, Graphics context, Display lists, - - PowerPoint PPT Presentation

Basic GUI Drawing

Drawing models, Graphics context, Display lists, Painter’s Algorithm, Drawing in Java

CS 349 - Drawing 1

Local Coordinates

• Any modern OS manages multiple windows
• Base Window System (BWS) manages:

– where the window is located, whether it is covered by another window, etc... – enables drawing using local coordinate system for window

CS 349 - Drawing 2

(o, o) +x +y (o, o) +x +y

Drawing Models

Three different conceptual drawing models:

CS 349 - Drawing 3

Pixel

SetPixel(x, y, colour) DrawImage(x, y, w, h, img)

Stroke

DrawLine(x1, y1, x2, y2, colour) DrawRect(x, y, w, h, colour)

Region

DrawLine(x1, y1, x2, y2, color, thick) DrawRect(x, y, w, h, colour, thick, fill) DrawText(“A”, x, y, colour)

Drawing Options

• Lots of options for drawing

– e.g. drawLine(x1,y1,x2,y2)

• what colour?
• how thick?
• dashed or solid?
• where are the end points?
• should the ends overlap?
• Observation: most choices are the

same for multiple calls to drawLine()

• How to communicate all the
• ptions?

– lots of parameters? – functions that are more specific? – some other way?

CS 349 - Drawing 4

Graphics Context (GC)

• Solution: Gather all drawing options into a single

structure and pass it to the drawing routines – In X, this is the Graphics Context (GC) structure

• All graphics environments use variation on this approach

– Java/C#: Graphics Object – OpenGL: Attribute State

• In X, the graphics context is stored on X server

– Can switch between multiple saved contexts to reduce network traffic (but limited memory on X server) – There is a default (global) graphics context shared by all applications.

• With modern applications, we don’t separate client

application and X server UI routines, but this assumption

• f repeated attributes (and GC) still applies

CS 349 - Drawing 5

Simplifying Drawing With Clipping

• What are some other problems that might arise

when trying to draw on a computer display? Clipping and the Painter’s Algorithm

CS 349 - Drawing 8

Clipping: More on this later …

CS 349 - Drawing 9

Painter’s Algorithm

• The basic graphics primitives are simple and
• nly support drawing basic shapes.
• To draw more complex shapes (composite):

– Draw back-to-front, layering the image – Called “Painter’s Algorithm”

• Also allows ”stacking” shapes to simulate depth

CS 349 - Drawing 11

Painters Algorithm Analogy

CS 349 - Drawing 12

Fast and with music: http://youtu.be/ghHxTjXAnM4

Using the Painters Algorithm

• How to implement the painter’s algorithm:

– Describe shapes that you wish to paint on-screen as “displayable” objects

• Each object needs to be capable of displaying

itself on the screen

• Implement as base class with a “paint” method
• Define derived classes for different kinds of

displayables: text, game sprites, etc. – Keep an ordered list of “displayables”

• Order the list back-to-front.

– To repaint

• Clear the screen (window).
• Repaint everything in the display list, in back-to-

front order.

CS 349 - Drawing 13

Drawing in Java

Overriding paintComponent() Graphics object

19 CS 349 - Drawing

Graphics and Painting

• Applications consist of a JFrame (window)

containing one or more Swing components.

• We often define a top-level canvas (container)

– This can hold other components (like text fields, buttons, scroll bars etc). – We can also draw directly on this canvas.

20 CS 349 - Drawing

Graphics and Painting

• Each component has a paintComponent()

method, which describes how it paints itself.

• You can override this paintComponent()

method and draw primitive objects using the

java.awt.Graphics object (basically, the

Graphics Context).

• This is a common technique for defining

drawables in Java.

21 CS 349 - Drawing

Java Component (revisit)

22

package guis_1.v2; import javax.swing.*; public class GUIs1v2 { public static void main(String[] args) { SwingUtilities.invokeLater(new Runnable() { @Override public void run() { JFrame frame = new JFrame("Window Title"); frame.setDefaultCloseOperation( JFrame.EXIT_ON_CLOSE); frame.setSize(400, 500); frame.add(new ColouredX()); frame.setVisible(true); } }); } } class ColouredXextends JComponent{ }

Painting the ColouredX

23

class ColouredX extends JComponent { private BasicStrokestroke = new BasicStroke(30.0f); public void paintComponent(Graphics g) { Graphics2D g2 = (Graphics2D) g; int w = this.getWidth(); int h = this.getHeight(); g2.setStroke(this.stroke); g2.setRenderingHint( RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON); g2.setColor(Color.RED); g2.drawLine(0, 0, w, h); g2.setColor(Color.BLUE); g2.drawLine(0, h, w, 0); } } paintComponent is called

• automatically. You never

call it yourself.* Graphics vs. Graphics2D

*Except, maybe, for pedagogical reasons in part 1 of assignment 1.

Summary

• Models (pixel, stroke, region)
• Graphics contexts
• Painter’s algorithm
• Display lists
• Drawing in Java

CS 349 - Drawing 24