DrawingDrawing models

Graphics context

Display lists

Painter’s Algorithm

Clipping & Double-buffering

1

Drawing Primitives

2

§ Three conceptual models for drawing:

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

StrokeDrawLine(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

only 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 on 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 combinedunsigned long plane_mask; // plane maskunsigned long foreground; // foreground pixelunsigned long background; // background pixel...int line_width; // line width (in pixels)int line_style; // LineSolid, LineDoubleDash, LineOnOffDashint cap_style; // CapButt, CapRound, CapProjectingint join_style; // JoinMiter, JoinRound, JoinBevelint fill_style; // FillSolid, FillTiled, FillStippled, … int fill_rule; // EvenOddRule, WindingRuleint 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 contextXSetForeground(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 thingsXDrawLine(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,

or 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 whywe 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

of using the GC. They’re a nice perk

of 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 FeaturesClipping

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!