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 1 CS 349 - Drawing

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 (o, o) +x (o, o) +x +y +y CS 349 - Drawing 2

Drawing Models Three different conceptual drawing models: SetPixel(x, y, colour) Pixel DrawImage(x, y, w, h, img) DrawLine(x1, y1, x2, y2, colour) Stroke DrawRect(x, y, w, h, colour) DrawLine(x1, y1, x2, y2, color, thick) Region DrawRect(x, y, w, h, colour, thick, fill) DrawText (“A”, x, y, colour) CS 349 - Drawing 3

• Lots of options for drawing Drawing Options – 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 options? – 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 of 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 only 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 Fast and with music: http://youtu.be/ghHxTjXAnM4 12 CS 349 - Drawing

• How to implement the painter’s algorithm: Using the Painters 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. CS 349 - Drawing 20

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. CS 349 - Drawing 21

package guis_1.v2; Java Component (revisit) 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 ColouredX extends JComponent{ } 22

Painting the ColouredX class ColouredX extends JComponent { private BasicStroke stroke = new BasicStroke(30.0f); public void paintComponent(Graphics g) { Graphics vs. Graphics2D g2 = (Graphics2D) g; Graphics2D int w = this .getWidth(); int h = this .getHeight(); paintComponent is called automatically. You never g2.setStroke( this . stroke ); call it yourself.* 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); } } *Except, maybe, for pedagogical reasons in part 1 of assignment 1. 23

Summary • Models (pixel, stroke, region) • Graphics contexts • Painter’s algorithm • Display lists • Drawing in Java CS 349 - Drawing 24