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

Drawing Options § 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 3

Drawing Efficiently on XWindows § 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? Windowing Systems 4

Using Graphics Context (GC) to Store Parameters § 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 5

XGCValues (Xlib Graphics Context) 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; 6

drawing.min.cpp 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); 7

JavaFX Canvas Class 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() • 9

Drawing Examples DrawingCanvas.java - Create a Stage, Scene and Canvas - Get a reference to Graphics Context (GC), and setup attributes - Use the GC to draw shapes! Swing also uses the GC to draw primitives. 1.4 Drawing 10

The Painters Algorithm Custom shape classes Ordering shapes on a canvas 11

Painter’s Algorithm § 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 draw front result first last 12

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

Implementing Painters Algorithm § 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) 14

Drawable Objects & Their Interface Define an interface (abstract base class) as a common type • Define specific classes that represent the shapes you wish to draw. • IShape.java “Implementing” an interface means that you commit to implementing all of its methods. SCircle.java 15

List of Displayables This is why we need an interface PaintersAlgorithm.java 1.4 Drawing 16

Demo: Painters Algorithm 17

Summary… 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… 18

Convenience Classes 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 19

Painter’s Algorithm (Revised) The node order in the scene graph determines the drawing order. PaintersAlgorithm2.java 1.4 Drawing 20

Advanced Features Clipping Double buffering 21

Clipping 22

Clipping in Java 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. 23

Double Buffering § 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! 24