drawing - scs | uwcs349/w20/... · drawing efficiently on xwindows windowing systems 4 §xwindowsis...
TRANSCRIPT
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!