Painting your window

Similar documents
Smoother Graphics Taking Control of Painting the Screen

Responding to the Mouse

Using Visual Studio. Solutions and Projects

Now it only remains to supply the code. Begin by creating three fonts:

Capturing the Mouse. Dragging Example

Chapter 13. Graphics, Animation, Sound and Drag-and-Drop The McGraw-Hill Companies, Inc. All rights reserved. McGraw-Hill

Chapter 13. Graphics, Animation, Sound, and Drag-and-Drop. McGraw-Hill. Copyright 2011 by The McGraw-Hill Companies, Inc. All Rights Reserved.

The Microsoft.NET Framework

Menus. You ll find MenuStrip listed in the Toolbox. Drag one to your form. Where it says Type Here, type Weather. Then you ll see this:

(0,0) (600, 400) CS109. PictureBox and Timer Controls

In this lecture we will briefly examine a few new controls, introduce the concept of scope, random numbers, and drawing simple graphics.

HOW TO. In this section, you will find. miscellaneous handouts that explain. HOW TO do various things.

We will start our journey into Processing with creating static images using commands available in Processing:

Course 2DCis: 2D-Computer Graphics with C# Chapter C1: Comments to the Intro Project

Instructions for Crossword Assignment CS130

Drawing Graphics in C Sharp

Graphics with GDI + WHAT S IN THIS CHAPTER?

2IS45 Programming

Create a memory DC for double buffering

HYPERSTUDIO TOOLS. THE GRAPHIC TOOL Use this tool to select graphics to edit. SPRAY PAINT CAN Scatter lots of tiny dots with this tool.

DRAWING AND MOVING IMAGES

And Even More and More C++ Fundamentals of Computer Science

Introduction. Create a New Project. Create the Main Form. Assignment 1 Lights Out! in C# GUI Programming 10 points

Chapter 7 Applets. Answers

Document Editor Basics

Learning to use the drawing tools

HAPPY HOLIDAYS PHOTO BORDER

SNOWFLAKES PHOTO BORDER - PHOTOSHOP CS6 / CC

Adobe illustrator Introduction

Visual C# Program: Simple Game 3

1 Getting started with Processing

FrontPage 98 Quick Guide. Copyright 2000 Peter Pappas. edteck press All rights reserved.

CS 315 Software Design Homework 1 First Sip of Java Due: Sept. 10, 11:30 PM

Topic Notes: Java and Objectdraw Basics

SHAPES & TRANSFORMS. Chapter 12 of Pro WPF : By Matthew MacDonald Assist Lect. Wadhah R. Baiee. College of IT Univ.

Load your files from the end of Lab A, since these will be your starting point.

Different Ways of Writing Windows Programs

Expressions and Casting

Step 1: Create A New Photoshop Document

Adobe Photoshop Sh S.K. Sublania and Sh. Naresh Chand

Anima-LP. Version 2.1alpha. User's Manual. August 10, 1992

We're going to show you how to draw a variety of items including: Lines, simple shapes. Images from bitmap and other image files. Text.

How to...create a Video VBOX Gauge in Inkscape. So you want to create your own gauge? How about a transparent background for those text elements?

Let s Make a Front Panel using FrontCAD

(Refer Slide Time: 00:02:00)

1 Getting started with Processing

Programming: You will have 6 files all need to be located in the dir. named PA4:

The Menger Sponge in Google SketchUp

An Introduction to MFC (builds on your lecture on MFC)

How to create shapes. Drawing basic shapes. Adobe Photoshop Elements 8 guide

Unit 21 - Creating a Navigation Bar in Macromedia Fireworks

Photoshop Introduction to The Shape Tool nigelbuckner This handout is an introduction to get you started using the Shape tool.

Simple diagrams made up of geometrical shapes can be designed directly in Delphi using the shape component from the ADDITIONAL component menu: shape

Working with images and scenes

Word 2003: Flowcharts Learning guide

EDITING SHAPES. Lesson overview

DOING MORE WITH WORD: MICROSOFT OFFICE 2013

FactoryLink 7. Version 7.0. Client Builder Reference Manual

Class Test 5. Create a simple paint program that conforms to the following requirements.

CS 201 Advanced Object-Oriented Programming Lab 10 - Recursion Due: April 21/22, 11:30 PM

DEC HEX ACTION EXTRA DESCRIPTION

The American University in Cairo. Academic Computing Services. Word prepared by. Soumaia Ahmed Al Ayyat

DOING MORE WITH WORD: MICROSOFT OFFICE 2010

Assignment 2. Application Development

Paint/Draw Tools. Foreground color. Free-form select. Select. Eraser/Color Eraser. Fill Color. Color Picker. Magnify. Pencil. Brush.

On the Web sun.com/aboutsun/comm_invest STAROFFICE 8 DRAW

Create a Swirly Lollipop Using the Spiral Tool Philip Christie on Jun 13th 2012 with 12 Comments

Unit D Lecture Notes Word 2003

IN CHAPTER 9 we delved into advanced 2D graphics programming. In

OpenForms360 Validation User Guide Notable Solutions Inc.

Introduction to Programming in C Department of Computer Science and Engineering. Lecture No. #43. Multidimensional Arrays

Module 5 The Applet Class, Swings. OOC 4 th Sem, B Div Prof. Mouna M. Naravani

How to draw and create shapes

HOUR 4 Understanding Events

The first time you open Word

Expressions and Casting. Data Manipulation. Simple Program 11/5/2013

This is the vector graphics "drawing" technology with its technical and creative beauty. SVG Inkscape vectors

DEVELOPING DATABASE APPLICATIONS (INTERMEDIATE MICROSOFT ACCESS, X405.5)

Interactive Tourist Map

Part 1: Basics. Page Sorter:

Photoshop Fundamentals

DOING MORE WITH WORD: MICROSOFT OFFICE 2007

Animations involving numbers

Generating Vectors Overview

PowerPoint 2003 for Windows Version Technology Workshop: Basic PowerPoint Animation for Music Presentations

Object-Oriented Programming in Processing

Chapter 8: Using Toolbars

10Tec igrid for.net 6.0 What's New in the Release

CST242 Windows Forms with C# Page 1

Exploring the Workspace

+ Inheritance. Sometimes we need to create new more specialized types that are similar to types we have already created.

BASICS OF MOTIONSTUDIO

Computer Graphics Prof. Sukhendu Das Dept. of Computer Science and Engineering Indian Institute of Technology, Madras Lecture - 24 Solid Modelling

Lesson 15 Working with Tables

IT101. Graphical User Interface

HOUR 12. Adding a Chart

In this lesson you are going to create a drawing program similar to Windows Paint. 1. Start with a new project and remove the default cat sprite.

OnPoint s Guide to MimioStudio 9

CISC 1600 Lecture 3.1 Introduction to Processing

Lesson 15 Working with Tables

Transcription:

The Paint event "Painting your window" means to make its appearance correct: it should reflect the current data associated with that window, and any text or images or controls it contains should appear correctly. A window may need painting when data changes when the window has been covered and then uncovered by another window when the user resizes it, or scrolls its contents when the active application has changed Windows sends your window a WM_PAINT message when it needs repainting. If you were programming directly in the Win32 API, you would write code in your window procedure to handle this message. When programming with the Foundation Class Libraries (FCL), the code in Application.Run contains the message pump. When it receives a WM_PAINT, it constructs a PaintEventArgs object and calls all the methods that are registered as handlers for that event, passing the correct sender parameter and the newly constructed PaintEventArgs object. As we saw in your first Windows program, Visual Studio even writes a skeleton event-handler for you, like this: private void Form1_Paint(object sender, System.Windows.Forms.PaintEventArgs e) { Normally you will ignore the sender parameter. (You would only need it in case more than one form used the same handler for the Paint event, which won t happen if you use Visual Studio. It could happen if you were writing your own code.) All the data you ll need is in the PaintEventArgs object. The Graphics class. The methods that draw lines, circles, rectangles, and text in the client area of a window all belong to the Graphics class. You ve already used one of

them in the call to the function e.graphics.drawstring in your first program. Here e.graphics is an object of type Graphics, and DrawString is a method in the Graphics class. All output to the screen in Windows, except the contents of controls such as edit boxes, text boxes, and list boxes, is graphics. This includes text, which is just another kind of graphics. Unlike the graphics systems used in either the Windows API or MFC, the system used in the FCL is (more or less) stateless. In practice what that means is that each call to the methods in the Graphics class has to have some parameters passed to it. For example, DrawString needs at least a font and a brush and coordinates at which to write text. This font and brush will not be remembered (that would require state ), and your next call to DrawString will also need to mention a font and brush, even if they are the same as before. Here s an example that draws a red rectangle: private void Form1_Paint(object sender, System.Windows.Forms.PaintEventArgs e) { Brush b = new SolidBrush(Color.Red); e.graphics.fillrectangle(b,5,5,100,100); top, width, height // brush, left, Here s the output:

Client Coordinates The coordinates used by functions in the Graphics classs are client coordinates. The origin is at (0,0) in the upper left corner of the client area of the window. X increases to the right just like in mathematics, but Y increases in the downwards direction, the opposite of the usual convention in mathematics. The unit is pixels. Most monitors nowadays have square pixels, so that the above code draws a square (since the width and height are given by the same number). Many printers, however, do not have square pixels, and their pixels are smaller than those on a monitor. For now, we re not printing anyway, so pixel coordinates will be fine. Rectangles and FillRectangle Here s an example of the use of the Rectangle class. This code produces the same red rectangle as the previous code. private void Form1_Paint(object sender, System.Windows.Forms.PaintEventArgs e) { Brush b = new SolidBrush(Color.Red); Rectangle r = new Rectangle(5,5,100,100); left, top, width, height e.graphics.fillrectangle(b,r); The Rectangle class has two int fields, X and Y, that specify one corner of the rectangle. It also has two fields, Width and Height, that specify (guess what) the width and height of the rectangle. These fields can be used to get and/or set the properties of a rectangle. They are the fields used in the constructor shown in the code above. Rectangle also has fields Left, Right, Top, and Bottom. These fields are read-only. Check that after constructing the rectangle as above, you can insert r.x = 50; r.y = 50; and the program will build, and the rectangle is changed. On the other hand if you try r.left = 50;

r.top = 50; you will get an error message, because those properties are read-only. Try setting r.width = -50. This compiles, but FillRectangle produces no output. There is also a class RectangleF, whose members have the same names as Rectangle, but their types are float instead of int. You might want to use RectangleF when you have set up some kind of coordinate system other than the default coordinates. Point and Size There is a class Point with two int members X and Y. There is also a class Size with two int members Width and Height. A rectangle can be constructed from a point and size, as well as from four ints. The following code produces the same red rectangle as before: Brush b = new SolidBrush(Color.Red); Point p = new Point(5,5); Size s = new Size(100,100); Rectangle r = new Rectangle(p,s); e.graphics.fillrectangle(b,r); You might wonder why Size is needed; it s formally exactly the same as Point, i.e. two integers. The reason is that the systematic use of Point and Size should cut down on bugs. When you specify a rectangle, you can think of it in two ways: left, top, right, bottom, or left, top, width, height. Many bugs have been caused in the past by putting a number that really measures a width in for the right of a rectangle, or vice-versa. The way Rectangle is defined in the FCL, Right and Bottom are read-only; and the systematic use of Point and Size should significantly reduce the number of such errors. There is a constructor for Point that takes a Size, and vice-versa, but you shouldn t ever need them, if you ve declared your variables in accordance with their intended use. Example 1: What is the center point of a Rectangle r? Point p; p.x = (r.right + r.left)/2; // note, plus not minus here p.y = (r.bottom + r.top)/2;

Example 2: What is the center point of a Rectangle r? (another solution) Point p; p.x = r.left + r.width/2; p.y = r.bottom + r.height/2; You can take the intersection of two rectangles: r.intersect(r2); Sets r to the intersection of r and r2. r.union(r1,r2) Sets r to the smallest rectangle containing both r1 and r2. r.offset(30,40); Adds 30 to X and 40 to Y without changing Width and Height. Example 3: Is point p inside rectangle r? where the user has clicked the mouse. This is very useful for testing if( r.contains(p) ) { // yes, it s inside An important thing to know about Contains is that it considers the left and top border of the rectangle to be inside the rectangle, but the bottom and right borders are outside the rectangle. This is useful when you have a grid of rectangles, like a checkerboard; then each point is in exactly one square of the checkerboard. But other times it is inconvenient, and you have to watch out for problems this feature may cause you. ClientRectangle You often want to know the client rectangle of your window, that is, the rectangle in which your program can draw. (This excludes the title bar, menu bar, toolbar, status bar(s), and border of your window, if it has those things.) There is a ClientRectangle member in the Form class, so (by virtue of the using commands at the top of your file) you can just refer to ClientRectangle anywhere in your painting code.

Example 4: Center the red rectangle in the window. private void Form1_Paint(object sender, System.Windows.Forms.PaintEventArgs e) { Brush b = new SolidBrush(Color.Red); Point p = new Point(5,5); Point center = new Point((ClientRectangle.Right+ClientRectangle.Left)/2, (ClientRectangle.Bottom + ClientRectangle.Top)/2); Size s = new Size(100,100); Rectangle r = new Rectangle(center,s); r.offset(-s.width/2,-s.height/2); e.graphics.fillrectangle(b,r); Observe, however, that this program does not work properly when the window is resized, or maximized and restored. This can be cured by putting this line in the form s constructor: ResizeRedraw = true; This causes the value of the ClientRectangle member to be reset, and the entire client rectangle to be redrawn, when the window is resized. DrawRectangle DrawRectangle outlines a rectangle using a pen, instead of a brush. Here s a sample call: { Pen q = new Pen(Color.Green,2); // the pen is 2 pixels wide Rectangle r = new Rectangle(5,5,100,100); e.graphics.drawrectangle(q,r); Example 5: Call DrawRectangle on the entire client rectangle, with a pen of width 1. You will only see the top and left sides drawn. ClientRectangle is set so that every point in the client area is inside it, according to Contains. But the right and bottom edge are outside. Hence, they aren t visible. If you wanted to see them you would have to create another rectangle with a slightly smaller Width and Height.

DrawEllipse DrawEllipse draws an ellipse bounded by a specified rectangle. Example 6: a circle is a special case of an ellipse, when the bounding rectangle is a square. Pen q = new Pen(Color.Green,2); // the pen is 2 pixels wide Rectangle r = new Rectangle(5,5,100,100); DrawEllipse(q,r); DrawEllipse(q,5,5,100,100); // this works too FillEllipse FillEllipse fills an ellipse bounded by a specified rectangle. You call it like DrawEllipse, but with a brush instead of a pen. It fills a slightly smaller ellipse than drawn by DrawEllipse, so you can fill and outline an ellipse by calling FillEllipse and then DrawEllipse. See Petzold, p. 204, for more details. Video Memory The graphics board (or "card") contains some memory that is used to update the screen. We can call this "video memory". 60 to 75 times a second this data will be used to drive the electron gun that makes the screen's pixels light up. [Television updates the screen 30 times a second, but computer monitors go twice as fast.] Thus, writing or drawing to the screen is done by changing some bits in video memory. [Some diagrams were shown on the board which are not in these slides, but the slides are still (hopefully) complete.] When a function like DrawString or FillRectangle is executed, the result is to change certain bits in video memory (on the graphics card). The next time the screen is refreshed these bits will result in the appearance of text or a colored rectangle on the screen. The step from the modification of video memory to the appearance on the screen is managed by the hardware (and/or firmware) on the graphics card, not by your (compiled) code. The details of the modification of video memory are also not handled by your code, but by the "driver" for the graphics card. The Windows implementation of

DrawString, for example, calls the appropriate driver supplied by the manufacturer of the graphics card. But, to cope properly with problems of flicker, etc., you must understand how this works: your code modifies video memory. Clipping Drawing to the screen takes time, sometimes too much time. So it is useful to be able to "clip" output to a given rectangle. Only pixels within that rectangle are changed. This is called "clipping". Modern devices support clipping in hardware, for speed. The invalid rectangle Windows keeps track of a rectangle which includes all areas of the window which will need modification at the next WM_PAINT message. This rectangle is called the "invalid rectangle". Note, each window has its own invalid rectangle. Just before Form1_Paint is called, the clipping rectangle will be set (by Windows) to what was the invalid rectangle up until Form1_Paint was called. Then the invalid rectangle will be set to the empty rectangle again. You will be able to find out, if you need to know, what the clipping rectangle is, by consulting e.cliprectangle, where e is the PaintEventArgs object passed to your Form1_Paint. In most Windows programs, you will not need to know or take explicit account of ClipRectangle. Instead, you write code in your Form1_Paint as if the whole window had to be repainted. Clipping will automatically prevent your program from inefficiently repainting parts of the screen that do not need it. The only time you would have to worry about repainting less than the whole window is in the rare case that it costs a lot of time to compute what to paint, e.g. in certain mathematical computer graphics programs.

Invalidate() When the document changes you do NOT immediately paint the screen. Instead, you call the Invalidate member function of your form. This causes a WM_PAINT message to be sent to the window, and then Form1_Paint will be called. The rule is, there is only one place in which you can paint the screen: in Form1_Paint. As a very expert Windows programmer, you might possibly violate that rule in certain very special cases, but not in this course! The FCL helps you with this because you need a Graphics object to draw, and you get one only as a member of the PaintEventArgs parameter to Form1_Paint. Invalidate(Rectangle r) Invalidate makes the invalid rectangle the entire client area of your window. If it is called often, this can produce flicker as your window is redrawn many times in succession. In such situations, it is possible to "invalidate" only a specified rectangle, containing the portion of the window you need redrawn, rather than the entire window. You pass a rectangle parameter to Invalidate to do this. You need this when programming animations or when drawing in response to the mouse.