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

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
• Modern systems like Java and OpenGL also have a Graphics

Context:

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

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

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. high-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 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 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 Features

Clipping Double buffering

21

22

Clipping

Clipping region Scene

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!