《CS 160 Lecture 12》由会员分享，可在线阅读，更多相关《CS 160 Lecture 12（52页珍藏版）》请在金锄头文库上搜索。
1、8/6/2017 1 CS 160: Lecture 12 Professor John Canny Fall 2004 8/6/2017 2 Outline Output * basic 2-D computer graphics * color models Input * event overview * windowing systems * window events * event dispatching Widget communication & layout 8/6/2017 3 2-D Computer Graphics Models for images * stroke
2、s, pixels, regions Coordinate systems * device, physical Canvas Drawing * paths, shapes, text Clipping 8/6/2017 4 Describe image as strokes (w/ color/thickness) + Line (10, 4), (17,4), thick 2, red) + Circle ( 19, 13), radius 3, thick 3, white) Maps to early vector displays & plotters Most UI toolki
3、ts have stroked objects * arcs, ellipses, rounded rectangles, etc. Stroke Model 8/6/2017 5 Problems with Stroke Model? How would you represent with strokes? Solution? 8/6/2017 6 Pixel Model Break-up complex images into discrete “pixels” & store color for each Resolution * spatial: number of rows by
4、columns * e.g., 1280 x 1024 is a good monitor display * quality laser printer: 10200 x 13200 (1200 dpi) * image depth (i.e., number of bits per pixel) * several styles. 8-bit, 24-bit, 32-bit 8/6/2017 7 Image Depth Bit map - 1 bit/pixel (on/off) * B&W screens or print-outs 8/6/2017 8 Image Depth (con
5、t.) Gray scale - 2-8 bits/pixel * group pixels (some on, some off) Full color - 24 bits/pixel * 8 bits per primary color (Red, Green, Blue) 8/6/2017 9 Image Depth (cont.) Full color 32 bits/pixel * Usually just 24-bit color (used for efficiency) * Extra 8-bits are optional can be used for “alpha” (t
6、ransparency) Color mapped - 8 bits/pixel * store index pixel - map into table w/ 24 bits * cuts space & computation * problem? 8/6/2017 10 Aliasing Smooth objects (e.g., lines) appear jagged since resolution is too low Antialiasing - fill-in some jagged places w/ gray scale or primary colors 8/6/201
7、7 11 Anti-Aliasing Pixels colored in proportion to relative amount of line that crosses them. Equivalently, draw the line in B/W at finer resolution and then color each pixel in proportion to number of colored sub-pixels. 8/6/2017 12 Cleartype The pixel matrix for a laptop or LCD screen. 8/6/2017 13
8、 Cleartype Use sub-pixel color pixels as though they were gray pixels (can cause color anomalies). 8/6/2017 14 Region Model Use the stroke model to outline region Fill the region with * colors & blendings (i.e., patterns) Advantages? * allows representation of filled shapes w/ + little memory + inde
9、pendence from display resolution Text represented this way & converted to bitmaps inside of the printer 8/6/2017 15 Outline Fonts Used by both Postscript & TrueType 8/6/2017 16 Canvas Abstraction for the drawing surface * most toolkits support one Defines methods used for drawing Each instance has a
10、 height, width, & defines its physical units Use the same method interface for * windows * image in memory * printed output Called Graphical Device Interface (GDI) by MS 8/6/2017 17 Drawing Could specify with: * void Canvas:Rectangle (x1, y1, x2, y2, lineWidth, lineColor, fillColor) Lots of paramete
11、rs! * shapes have properties in common + geometry, line/border width, line/fill color, pattern Use current settings of canvas * Usually there is a “graphicscontext” or similar abstraction that defines all the parameters needed for drawing. 8/6/2017 18 Text Font Selection Font family * .Garamond, Ari
12、al, Modern, Times Roman, Courier * defines the general shape of the characters + some are mono-spaced (“i” gets same space as “G”) + serif (e.g., Times) vs. sans serif (e.g., Arial) + serifs have “feet” at baseline - easier to track eye but look bad on low-resolution displays. Style * normal, bold,
13、italic, bold italic size in points (1 point = 1/72 inch) 8/6/2017 19 Text (cont.) Usually simple to draw +Canvas Cnv; + Cnv.SetFont (“Times”, Bold, 10); + Cnv.Text (10, 20, “This is the text”); Outline vs. Bitmapped fonts * need pixels to draw on screen so may store as BM + problems: takes lots of s
14、pace font in several sizes * instead store as a closed shape (e.g., outline only) * easy to scale to any size and convert to bitmap 8/6/2017 20 Vector vs. Raster Formats Vector: * Macromedia Flash. * SVG (Scalable Vector Graphics), a W3C standard. * VML (Microsoft), Powerpoint animation. Raster: * J
15、peg: Better for smooth images * Gif, Png: Better for line art or “South Park” animation 8/6/2017 21 Color Models 256 levels for each primary adequate * - 24 bits / pixel RGB model * specify color by red, green, & blue components HSV model - hue, saturation, & value * hue is primary wavelength (i.e.,
16、 basic color) * saturation is a measure of how pure light is + high is pure, low means it is mixed w/ white/gray * value is intensity (dark vs. light) 8/6/2017 22 Color Models (cont.) HSV is easier for people to use * there is a direct conversion to RGB CMY model * in terms of mixtures of pigments * pigment gets color fr
