Računarska grafika GDI+ (Graphics Device Interface Plus)

Slides:



Advertisements
Similar presentations
In InDesign, you can create a new file by pressing Command/Control-N.
Advertisements

Graphics You draw on a Graphics object The Graphics object cannot directly be created by your code, instead one is generated when the method paintComponent.
1 Cascading Style Sheets Continued Different kinds of selectors in a style sheet –Simple- Pseudo-Class –Contextual- Pseudo-Element –Class Image Styles.
Foundation Level Course
Notes Microsoft PowerPoint. A complete presentations graphic program that allows you to make professional looking presentations Also called a slide show.
PowerPoint. Getting Started with PowerPoint Objectives Start PowerPoint and open presentations Explore toolbars and menus Use the Office Assistant Work.
DIGITAL GRAPHICS & ANIMATION Complete LESSON 4 ADDING TEXT TO GRAPHICS.
Chapter Concepts Discuss Fonts Understand Fonts
Lecture 9 1 Chinese Character Output Character 字符 : abstract object recognized by human in communication, it is the representation at the conceptual level.
Use the Macromedia Flash drawing tools Edit drawings Work with objects Work with text Work with layers Unit Lessons.
Macromedia Flash MX 2004 – Design Professional Macromedia Flash MX DRAWING IN.
IBA First Semester Exam Review. Microsoft Office 2010 Basics and the Internet 1.The tabs on the Ribbon organize the commands into related tasks. The commands.
Raster vs Vector and Image Resolution By Josh Gallagan.
Thinking with Type A Critical Guide for Designers, Writers, Editors, & Students ELLEN LUPTON v.
OpenGL Pixel Operations, Bitmaps, Fonts and Images The Current Raster Position Current raster position: A position in window coordinates where the next.
Text in multimedia Why would course designers like text? The most inexpensive media to develop Least overhead in storage/transmission But text creation.
Pasewark & Pasewark 1 Word Lesson 6 Working with Graphics Microsoft Office 2007: Introductory.
Vector Graphics Making custom images. Raster vs. Vector Graphics In computer graphics, a raster graphics image, or bitmap, is a dot matrix data structure.
Microsoft Office 2007: Introductory 1 Word Lesson 6 Working with Graphics Computer Applications 1.
Using Cascading Style Sheets. Introduction to Styles and Properties  Cascading Style Sheets (CSS) are a standard set by the World Wide Web Consortium.
2.1 Different Text Attributes Font A set of printable or displayable text characters with its style and size specified Arial 16 point bold Arial 32 point.
Adobe Flash CS4 – Illustrated Unit B: Creating Graphics and Text.
Introduction to Interactive Media 06: Text: Static Interactive Media Component.
Neal Stublen Font Limitations  Browsers can only display the fonts installed on the device Arial, Verdana, Times, Georgia  Custom.
B.Sc. Multimedia ComputingMedia Technologies Character Representation & Font Technology.
Računarska grafika GDI+ (Graphics Device Interface Plus)
 Pearson Education, Inc. All rights reserved Formatted Output.
© Copyright by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. Tutorial 26 – CheckWriter Application Introducing Graphics.
Tutorial 2 Drawing Text, Adding Shapes, and Creating Symbols.
CHAPTER FIVE TEXT.
2D Graphics: Rendering Details
© 2010 Delmar, Cengage Learning Chapter 2: Drawing Objects in Adobe Flash.
Chapter 2 Drawing Objects in Adobe Flash. 1.Use the Flash drawing and alignment tools 2.Select objects and apply colors 3.Work with drawn objects 4.Work.
T U T O R I A L  2009 Pearson Education, Inc. All rights reserved CheckWriter Application Introducing Graphics and Printing.
Introduction to Interactive Media Interactive Media Components: Text.
Addison Wesley is an imprint of © 2010 Pearson Addison-Wesley. All rights reserved. Chapter 2 Graphics Programming with C++ and the Dark GDK Library Starting.
Character Generation.
Creating Web Pages Chapter 5 Learn how to… Identify Web page creation strategies. Define HTML Web page elements. Describe the principles of good screen.
Basics of Web Design Chapter 6 More CSS Basics Key Concepts.
Graphics. Graphic is the important media used to show the appearance of integrative media applications. According to DBP dictionary, graphics mean drawing.
1 Chapter 3 2D Graphics: Rendering Details  Color spaces, paints stroke types  Affine transforms including translation, rotation, scaling, shearing,
Copyright © 2009 Pearson Education, Inc. Publishing as Prentice Hall. 1 Skills for Success with Microsoft ® Office 2007 PowerPoint Lecture to Accompany.
Vector vs. Raster Objectives:
Računarska grafika GDI+ (Graphics Device Interface Plus)
Formatting WorksheetsFormatting Worksheets Lesson 7.
Tkinter Canvas.
CIS234A Lecture 8 Instructor Greg D’Andrea. Review Text Table contains only text, evenly spaced on the Web page in rows and columns uses only standard.
1 Graphic Device Interface (GDI). 2 Class Form A Form is a representation of any window displayed in your application. The Form class can be used to create.
TEXT.  Font Style Examples: ◦ Bold ◦ Italic ◦ Underline  Font Size Examples: ◦ Points  8 pt (can be smaller)  10 pt  12 pt.
CS 325 Introduction to Computer Graphics 04 / 12 / 2010 Instructor: Michael Eckmann.
Graphics and Multimedia. OUTLINE Font Control Drawing Lines, Rectangles and Ovals Drawing Arcs Drawing a General Path.
Using Text. The Encapsulated PostScript (EPS) language file format is used to transfer PostScript language artwork between applications, and it is supported.
UNIT 4 - TYPOGRAPHY Digital Communications I. 3-D  an effect that gives the illusion of depth.
GDI +. Graphics class's methods System.Drawing Graphics Objects.
Graphics Basic Concepts 1.  A graphic is an image or visual representation of an object.  A visual representation such as a photo, illustration or diagram.
(PART II) Graphics and Multimedia. Font Control Font s  After a Font is created, its properties cannot be modified  Programmers must create a new Font.
Graphics and Multimedia 2 Lecture 8. OUTLINE Font Control Drawing Lines, Rectangles and Ovals Drawing a General Path.
CSS.
Vector (Shapes) vs. Raster (Pixels)
Adobe Flash Professional CS5 – Illustrated
DFP 4113 MULTIMEDIA TECHNOLOGY
Word Processing.
Word Lesson 6 Working with Graphics
Objectives Create a reset style sheet Explore page layout designs
CPT 450 Computer Graphics 5th Lecture.
Chapter Lessons Use the Macromedia Flash drawing tools
Vector (Shapes) vs. Raster (Pixels)
Repetition and Multiple Forms
Graphics and Multimedia
Presented by Domas Baltrūnas
Presentation transcript:

Računarska grafika GDI+ (Graphics Device Interface Plus)

Fonts glyph – an individual mark on a written medium that contributes to the meaning of what is written. font – a complete character set of a single size and style of a particular typeface font family – set of fonts that share the same basicdesign typeface –design of fonts (line width, serif,...) pitch – width of individual characters – fixed pitch – all characters have the same width – variable pitch – some characters are wider and some narrower serif – semi-structural details on the ends of some of the strokes that make up letters and symbols. (sans-serif -> not serif)

Font types Bitmap fonts - consist of a matrix of dots or pixels representing the image of each glyph in each face and size. Outline fonts - (also called vector fonts) use Bézier curves, drawing instructions and mathematical formulae to describe each glyph, which make the character outlines scalable to any size. Stroke fonts - use a series of specified lines and additional information to define the profile, or size and shape of the line in a specific face, which together describe the appearance of the glyph.

Font formats TrueType – flexible, composed of lines and curves and additional information on each character (. FON and / or. TTF) OpenType – extension of TrueType fonts, so that Adobe PostScript support Compact File Format ClearType – ClearType is a software technology developed by Microsoft that improves the readability of text on existing LCDs

Font metric

DrawString DrawString(String s, Font font, Brush brush, PointF point) DrawString(String s, Font font, Brush brush, PointF point, StringFormat format) DrawString(String s, Font font, Brush brush, RectangleF layout) s ▫String to draw. font ▫Font that defines the text format of the string. brush ▫Brush that determines the color and texture of the drawn text. point ▫PointF structure that specifies the upper-left corner of the drawn text. format ▫StringFormat that specifies formatting attributes, such as line spacing and alignment, that are applied to the drawn text. layout ▫RectangleF structure that specifies the location of the drawn text.

DrawString g.DrawString("Računarska grafika, I.Sarajevo", new Font("Arial", 26), new SolidBrush(Color.Blue), new PointF(100, 100));

Font Font(String family, Single emSize) Font(String family, Single emSize, FontStyle style) Font(String family, Single emSize, FontStyle style, GraphicsUnit unit, Byte gdiCharSet) family ▫A string representation of the FontFamily for the newFont. emSize ▫The em-size of the new font in the units specified by the unit parameter. style ▫The FontStyle of the new font. unit ▫The GraphicsUnit of the new font. gdiCharSet ▫A Byte that specifies a GDI character set to use for this font.

FontStyle NameDescription RegularNormal text. BoldBold text. ItalicItalic text. UnderlineUnderlined text. StrikeoutText with a line through the middle. FontStyle stilic; stilic = FontStyle.Bold | FontStyle.Underline; FontStyle stilic; stilic = FontStyle.Bold | FontStyle.Underline;

Font & FontStyle SolidBrush cetkica = new SolidBrush(Color.Blue); FontStyle stilic; stilic = FontStyle.Bold | FontStyle.Underline; Font fontic = new Font("Times New Roman", 26); g.DrawString("Računarska grafika, I.Sarajevo", fontic, cetkica, new PointF(100,100)); fontic = new Font("Times New Roman", 26, stilic); g.DrawString("Računarska grafika, I.Sarajevo", fontic, cetkica, new PointF(100,150));

Font & FontStyle

StringFormat StringFormat() StringFormat(StringFormatFlags options) ▫Alignment ▫FormatFlags ▫LineAlignment options ▫The StringFormatFlags enumeration for the newStringFormat object.

StringFormatFlags Member nameDescription DirectionRightToLeftText is displayed from right to left. DirectionVerticalText is vertically aligned. FitBlackBox Parts of characters are allowed to overhang the string's layout rectangle. By default, characters are repositioned to avoid any overhang. DisplayFormatControlControl characters such as the left-to-right mark are shown in the output with a representative glyph. NoFontFallback Fallback to alternate fonts for characters not supported in the requested font is disabled. Any missing characters are displayed with the fonts missing glyph, usually an open square. MeasureTrailingSpaces Includes the trailing space at the end of each line. By default the boundary rectangle returned by the MeasureString method excludes the space at the end of each line. Set this flag to include that space in measurement.MeasureString NoWrap Text wrapping between lines when formatting within a rectangle is disabled. This flag is implied when a point is passed instead of a rectangle, or when the specified rectangle has a zero line length. LineLimit Only entire lines are laid out in the formatting rectangle. By default layout continues until the end of the text, or until no more lines are visible as a result of clipping, whichever comes first. Note that the default settings allow the last line to be partially obscured by a formatting rectangle that is not a whole multiple of the line height. To ensure that only whole lines are seen, specify this value and be careful to provide a formatting rectangle at least as tall as the height of one line. NoClipOverhanging parts of glyphs, and unwrapped text reaching outside the formatting rectangle are allowed to show. By default all text and glyph parts reaching outside the formatting rectangle are clipped.

Font & FontStyle & StringFormat StringFormat format = new StringFormat(); format.Alignment = StringAlignment.Near; format.FormatFlags = StringFormatFlags.DirectionVertical; format.LineAlignment = StringAlignment.Far; SolidBrush cetkica = new SolidBrush(Color.Blue); FontStyle stilic; stilic = FontStyle.Bold | FontStyle.Underline; fontic = new Font("Times New Roman", 26, stilic); g.DrawString("Računarska grafika, I.Sarajevo", fontic, cetkica, new PointF(100,150), format);

MeasureString MeasureString(String text, Font font) MeasureString(String text, Font font, SizeF layout) MeasureString(String text, Font font, SizeF layout, StringFormat stringFormat) text ▫String to measure. font ▫Font defines the text format of the string. layout ▫SizeF structure that specifies the maximum layout area for the text. stringFormat ▫StringFormat that represents formatting information, such as line spacing, for the string.

Example Matrix matricaTransformacija = new Matrix(); matricaTransformacija.Translate(this.ClientRectangle.Wid th/2, this.ClientRectangle.Height/2); g.Transform = matricaTransformacija; Brush cetkica = new SolidBrush(Color.Black); Font fontic = new Font("Arial", 40); float x, y; const int BrojSati = 12; const int StepeniIzmedjuDvaBroja = 360 / BrojSati; const int PoluprecnikSata = 300;

Example for (int i = 1; i <= BrojSati; i++) { x = GetCos(i * StepeniIzmedjuDvaBroja + 90) * PoluprecnikSata; y = GetSin(i * StepeniIzmedjuDvaBroja + 90) * PoluprecnikSata; StringFormat format = new StringFormat(); format.Alignment = StringAlignment.Center; format.LineAlignment = StringAlignment.Center; g.DrawString(i.ToString(), fontic, cetkica, -x, -y, format); }

Example for (int i = 1; i <= BrojSati; i++) { SizeF stringSize = g.MeasureString(i.ToString(), fontic); x = GetCos(i * StepeniIzmedjuDvaBroja + 90) * PoluprecnikSata; x += stringSize.Width / 2; y = GetSin(i * StepeniIzmedjuDvaBroja + 90) * PoluprecnikSata; y += stringSize.Height / 2; g.DrawString(i.ToString(), fontic, cetkica, -x, -y); }

Example float GetSin(float UgaoUStep) { return (float)Math.Sin(Math.PI * UgaoUStep / 180f); } float GetCos(float UgaoUStep) { return (float)Math.Cos(Math.PI * UgaoUStep / 180f); }