Output models Automatic redraw - PDF document

�������������� � Output models � Automatic redraw ������������������������ � Double-buffering � Antialiasing � Subpixel rendering � Transparency Fall 2004 6.831 UI Design and Implementation 1 Fall 2004 6.831 UI Design and Implementation 2 ������������������� ������������������������������� � Components � Graphical objects arranged in a tree with automatic redraw A B � Example: Label object, Line object � Also called: views, interactors, widgets, controls, retained graphics, display list C � Strokes � High-level drawing primitives: lines, shapes, curves, text � Component model � Example: drawText() method, drawLine() method � Each node and edge is a component � A node might have two subcomponents: circle and label � Also called: vector graphics, structured graphics � Stroke model � Pixels � Graph view draws lines, rectangles and text � 2D array of pixels � Pixel model � Also called: raster, image, bitmap � Graph view has pixel images of the nodes Fall 2004 6.831 UI Design and Implementation 3 Fall 2004 6.831 UI Design and Implementation 4 1

���������!��������������������� ���������������!�������������� � Layout � Drawing goes top down � Draw self (using strokes or pixels) � Input � For each child component, � Redraw � If child intersects clipping region then � Drawing order � intersect clipping region with child � s bounding box � recursively draw child with clip region = intersection � Heavyweight objects � Device dependence A B clip region C Fall 2004 6.831 UI Design and Implementation 5 Fall 2004 6.831 UI Design and Implementation 6 $�%&��#������!������'�������� �����������"���������#����� �((���� Object moves A A A B B B C C D damaged region Determine Redraw parent Redraw children damaged region (children blink out!) Fall 2004 6.831 UI Design and Implementation 7 Fall 2004 6.831 UI Design and Implementation 8 2

���)��*+�((����� ,���-������� � Drawing surface � Double-buffering solves the flashing � Also called drawable (X Windows), GDI (MS Win) problem � Screen, memory buffer, print driver, file, remote screen � Graphics context � Encapsulates drawing parameters so they don � t have to be passed with each call to a drawing primitive Screen � Font, color, line width, fill pattern, etc. � Coordinate system � Origin, scale, rotation � Clipping region Memory � Drawing primitives buffer � Line, circle, ellipse, arc, rectangle, text, polyline, shapes Fall 2004 6.831 UI Design and Implementation 9 Fall 2004 6.831 UI Design and Implementation 10 !��&�������,���-������.����� "����������� ����,�)����� #�������� � Is (0,0) the center of the top-left pixel, or is it the upper left corner of the pixel? � MS Win: center of pixel � Java: upper left corner � Where is line (0,0) � (10,0) actually drawn? � MS Win: endpoint pixel excluded � Java 1.1: pen hangs down and right � Java 1.2: antialiased pen, optional � pixel adjustments made for compatibility � Where is empty rectangle (0,0) � (10,10) drawn? � MSWin: connecting those pixels � Java 1.1: extends one row below and one column right � Java 1.2: like Java 1.1, for compatibility Unaliased Antialiased Subpixel rendering � Where is filled rectangle (0,0) � (10,10) drawn? � MSWin: all 121 pixels � Java 1.1: 100 pixels � Java 1.2: like Java 1.1 Fall 2004 6.831 UI Design and Implementation 11 Fall 2004 6.831 UI Design and Implementation 12 3

!����������� /,��0�/�, � RGB: cube � Red, green, blue � HSV: hexagonal cone � Hue: kind of color � Angle around cone � Saturation: amount of pure color � 0% = gray, 100% = pure color � Value: brightness � 0% = dark, 100% = bright � HLS: double-hexagonal cone � Hue, lightness, saturation � Pulls up center of HSV model, so that only white has lightness 1.0 and pure colors have lightness 0.5 � Cyan-Magenta-Yellow(-Black) � Used for printing, where pigments absorb wavelengths instead of generating them Fall 2004 6.831 UI Design and Implementation 13 Fall 2004 6.831 UI Design and Implementation 14 ������������ !���������������(�������� � Most GUI systems put default origin in top left � Alpha is a pixel � s transparency corner � from 0.0 (transparent) to 1.0 (opaque) � Except Postscript: origin is bottom left � Translation � so each pixel has red, green, blue, and � moves origin by dx, dy alpha values � Scaling � Uses for alpha � multiplies x by sx and y by sy � Antialiasing � Rotation � rotates by theta around an axis point x, y � Nonrectangular images � Use coordinate transforms to make drawing � Translucent components easier � Clipping regions with antialiased edges Fall 2004 6.831 UI Design and Implementation 15 Fall 2004 6.831 UI Design and Implementation 16 4

��������!�����������&�1���&���� !���������� � Stroke model can use arbitrary measurements � Usually pixels � Inches, millimeters, points (1/72 of an inch) � Dialog box units on Windows � � of width of system font, 1/8 of height � Pixel model uses actual device pixels � Device driver computes appropriate scaling transform based on resolution (pixels/inch) Fall 2004 6.831 UI Design and Implementation 17 5