Drawing Drawing models Graphics context Display lists Painters - - PowerPoint PPT Presentation

Drawing

Drawing models Graphics context Display lists Painter’s Algorithm Clipping & Double-buffering

1

Drawing Primitives

2

§ Three conceptual models for drawing:

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 DrawText("A", x, y, colour) DrawRect(x, y, w, h, colour, thick, fill)

A

Drawing Options

3

§ DrawLine() § Many options:

• what colour?
• how thick?
• dashed or solid?
• where are the end points and how

should the ends overlap?

§ Observations:

• most choices are the same for multiple

calls to DrawLine()

• lots of different parameters, but may
• nly want to set one or two

Drawing Efficiently on XWindows

Windowing Systems 4

§ Xwindows is a client-server architecture. § Separates the user interface from applications:

• an X Client handles all application logic (application code)
• an X Server handles all display output and user input (user interface)

§ Server handles request from

client, process data as requested, and returns results to client

§ We want the program running

• n one machine to efficiency

draw on a second machine.

§ How?

Using Graphics Context (GC) to Store Parameters

5

§ Gather all options into a structure, pass it to the drawing routines

• Easy to fall back to default parameters
• Easy to switch between contexts
• Efficient to pass once, since they don’t often change

§ In X, the Graphics Context (GC) is stored on the X Server

• Inherit from a default global context for X Server
• Fast to switch between contexts since reduced network traffic between

X Server and X Client

§ Modern systems like Java and OpenGL also have a Graphics Context:

• Java: Graphics Object
• Java FX: Graphics Context
• OpenGL: Attribute State

XGCValues (Xlib Graphics Context)

6

typedef struct { int function; // how the source and destination are combined unsigned long plane_mask; // plane mask unsigned long foreground; // foreground pixel unsigned long background; // background pixel ... int line_width; // line width (in pixels) int line_style; // LineSolid, LineDoubleDash, LineOnOffDash int cap_style; // CapButt, CapRound, CapProjecting int join_style; // JoinMiter, JoinRound, JoinBevel int fill_style; // FillSolid, FillTiled, FillStippled, … int fill_rule; // EvenOddRule, WindingRule int arc_mode; // ArcChord, ArcPieSlice ... Font font; // default font ... } XGCValues;

drawing.min.cpp

7

int w = 300; int h = 300; … XFlush(display); sleep(1); // give server time to setup before sending // drawing demo with graphics context here ... GC gc = XCreateGC(display, window, 0, 0); // graphics context XSetForeground(display, gc, BlackPixel(display, screen)); XSetBackground(display, gc, WhitePixel(display, screen)); XSetFillStyle(display, gc, FillSolid); XSetLineAttributes(display, gc, 3, // 3 is line width LineSolid, CapButt, JoinRound); // other line options // draw some things XDrawLine(display, window, gc, 10, 10, w-10, h-10); XFillRectangle(display, window, gc, 50, 50, w-(2*50), h- (2*50)); XSetForeground(display, gc, WhitePixel(display, screen)); XDrawLine(display, window, gc, w-10, 10, 10, h-10); XFlush(display);

JavaFX Canvas Class

9

The Canvas class is a Node that you can draw on, using a graphics context.

• Each canvas contains a buffer, where the scene graph is built-up.
• It also contains a single Graphics Context which determines how the scene

will be drawn.

GraphicsContext gc = cavas.getGraphicsContext2D();

The graphics context has a number of attributes that can be modified:

• Rendering : clipping, blend, transforms.
• Fill: fill paint color
• Stroke: Paint, line width, line cap, line thickness, line join.
• Text: Font, Text align

It can also be used to draw:

• Rectangle: fillRect(), strokeRect()
• Oval: fillOval(), strokeOval()
• Polygons: fillPolygon(), strokePolygon(), fillPolyline, strokePolyline()

Drawing Examples

1.4 Drawing 10

• Create a Stage, Scene and Canvas
• Get a reference to Graphics Context (GC), and setup attributes
• Use the GC to draw shapes!

DrawingCanvas.java

Swing also uses the GC to draw primitives.

The Painters Algorithm

Custom shape classes Ordering shapes on a canvas

11

Painter’s Algorithm

12

§ Basic graphics primitives are (really) primitive. § To draw more complex shapes:

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

draw back first draw front last result

The 1 Minute Painting http://student.cs.uwaterloo.ca/~cs349/videos/1_minute_painting.mp4

13

Painters Algorithm Analogy

Implementing Painters Algorithm

14

§ Think about the things your program needs to paint

• e.g. low-level primitives like text, circle, polyline, etc.
• e.g. level things like: game sprite, button, bar graph, etc.

§ Package drawing of each thing into an object that can draw itself

• Design a top-level interface with a “paint” method
• Create a class for each item to be drawn, that implements this interface

§ Keep an ordered display list of Displayable objects

• Order the list back-to-front (just us a FIFO stack for back-to-front drawing,
• r add “z-depth” field and sort on that)

§ To repaint

• Clear the screen (window)
• Repaint everything in the display list (in back-to-front order)

Drawable Objects & Their Interface

15

SCircle.java IShape.java

• Define an interface (abstract base class) as a common type
• Define specific classes that represent the shapes you wish to draw.

“Implementing” an interface means that you commit to implementing all of its methods.

List of Displayables

1.4 Drawing 16

PaintersAlgorithm.java

This is why we need an interface

Demo: Painters Algorithm

17

Summary…

18

So, drawing requires

§ 1. Creating a canvas, § 2. Getting the Graphics Context (GC) from

the canvas,

§ 3. Defining custom shape classes that can

draw using the GC,

§ 4. Adding objects to a list, § 5. Writing a custom draw function, § 6. Initializing everything.

Isn’t there an easier way to do this? Yes, absolutely! You’ve already seen it…

Convenience Classes

19

Nodes subclasses include Shape classes, which the scene can draw. Although there are times when you need to use the GC (more on that later), MOST of the time you can just use the built-in Shapes classes!

You should always use these classes, if you can, instead

• f using the GC.

They’re a nice perk

• f Java FX.

DrawShapes.java

Painter’s Algorithm (Revised)

1.4 Drawing 20

PaintersAlgorithm2.java

The node order in the scene graph determines the drawing order.

Advanced Features

Clipping Double buffering

21

22

Clipping

Clipping in Java

23

The Graphics2D context has a clipping path (region) that you can define.

§ call Graphics2D.setClip() and pass in the Shape that defines the clipping path

you want to use.

§ e.g. Graphics2D.setClip(new Oval)

clipimage.java

This is old code, just useful to demonstrate the concept.

Double Buffering

24

§ Flickering when an intermediate

image is on the display

§ Solution:

• Create an off-screen image buffer
• Draw to the buffer
• Fast copy the buffer to the screen

§ Note:

• In older toolkits e.g. C++/Xlib, you

would implement this yourself.

• Modern toolkits, including JavaFX,

include this functionality and will automatically double-buffer!