Download - Graphics
![Page 1: Graphics](https://reader034.vdocuments.us/reader034/viewer/2022052618/554c6ca1b4c9057c778b4dae/html5/thumbnails/1.jpg)
C# .NET Graphics
Extra – not tested
Required for assignment 1
![Page 2: Graphics](https://reader034.vdocuments.us/reader034/viewer/2022052618/554c6ca1b4c9057c778b4dae/html5/thumbnails/2.jpg)
What will we be learning?
Surface, pen and brush
Draw Lines
Draw Rectangles
Draw Polygons
Draw Text
![Page 3: Graphics](https://reader034.vdocuments.us/reader034/viewer/2022052618/554c6ca1b4c9057c778b4dae/html5/thumbnails/3.jpg)
Basic - Graphics
(1) we need to have a Graphics instance (similar
to a surface)
![Page 4: Graphics](https://reader034.vdocuments.us/reader034/viewer/2022052618/554c6ca1b4c9057c778b4dae/html5/thumbnails/4.jpg)
Basic
Declare
Graphics mySurface;
![Page 5: Graphics](https://reader034.vdocuments.us/reader034/viewer/2022052618/554c6ca1b4c9057c778b4dae/html5/thumbnails/5.jpg)
Basic
Create
Graphics mySurface;mySurface = this.CreateGraphics();
![Page 6: Graphics](https://reader034.vdocuments.us/reader034/viewer/2022052618/554c6ca1b4c9057c778b4dae/html5/thumbnails/6.jpg)
Basic - Pen
(2) To draw lines or outlines of
shapes, we need a Pen
![Page 7: Graphics](https://reader034.vdocuments.us/reader034/viewer/2022052618/554c6ca1b4c9057c778b4dae/html5/thumbnails/7.jpg)
Basic - Pen
Declare
Pen pen1;
![Page 8: Graphics](https://reader034.vdocuments.us/reader034/viewer/2022052618/554c6ca1b4c9057c778b4dae/html5/thumbnails/8.jpg)
Basic - Pen
Create
2 parameters- Color
- thickness
Pen pen1;pen1 = new Pen(Color.Blue, 1.0f);
![Page 9: Graphics](https://reader034.vdocuments.us/reader034/viewer/2022052618/554c6ca1b4c9057c778b4dae/html5/thumbnails/9.jpg)
Basic - Brush
(3) To fill inside shapes, we need
a Brush
![Page 10: Graphics](https://reader034.vdocuments.us/reader034/viewer/2022052618/554c6ca1b4c9057c778b4dae/html5/thumbnails/10.jpg)
Basic - Brush
Declare
Types of brushSolidBrushHatchBrush
LinearGradientBrushPathGradientBrush
TextureBrush
SolidBrush brush1;
![Page 11: Graphics](https://reader034.vdocuments.us/reader034/viewer/2022052618/554c6ca1b4c9057c778b4dae/html5/thumbnails/11.jpg)
Basic - Brush
Create
SolidBrush brush1;brush1 = new SolidBrush(Color.Green);
![Page 12: Graphics](https://reader034.vdocuments.us/reader034/viewer/2022052618/554c6ca1b4c9057c778b4dae/html5/thumbnails/12.jpg)
Basic - BrushTypes of brush
SolidBrushHatchBrush
LinearGradientBrushPathGradientBrush
TextureBrush
![Page 13: Graphics](https://reader034.vdocuments.us/reader034/viewer/2022052618/554c6ca1b4c9057c778b4dae/html5/thumbnails/13.jpg)
Draw Lines> New Solution: SpfGraphics
> Select Form1.cs, select design view
> select events and double click “Paint” event
![Page 14: Graphics](https://reader034.vdocuments.us/reader034/viewer/2022052618/554c6ca1b4c9057c778b4dae/html5/thumbnails/14.jpg)
Draw Lines
![Page 15: Graphics](https://reader034.vdocuments.us/reader034/viewer/2022052618/554c6ca1b4c9057c778b4dae/html5/thumbnails/15.jpg)
Draw Lines
![Page 16: Graphics](https://reader034.vdocuments.us/reader034/viewer/2022052618/554c6ca1b4c9057c778b4dae/html5/thumbnails/16.jpg)
Output
![Page 17: Graphics](https://reader034.vdocuments.us/reader034/viewer/2022052618/554c6ca1b4c9057c778b4dae/html5/thumbnails/17.jpg)
Using points & DrawLinesContinue in Form1_Paint
![Page 18: Graphics](https://reader034.vdocuments.us/reader034/viewer/2022052618/554c6ca1b4c9057c778b4dae/html5/thumbnails/18.jpg)
Output
surface1.DrawLine(pen1, pt1, pt3);
surface1.DrawLines(pen1, points);
![Page 19: Graphics](https://reader034.vdocuments.us/reader034/viewer/2022052618/554c6ca1b4c9057c778b4dae/html5/thumbnails/19.jpg)
Draw RectangleContinue in Form1_Paint
![Page 20: Graphics](https://reader034.vdocuments.us/reader034/viewer/2022052618/554c6ca1b4c9057c778b4dae/html5/thumbnails/20.jpg)
Draw Rectangle
![Page 21: Graphics](https://reader034.vdocuments.us/reader034/viewer/2022052618/554c6ca1b4c9057c778b4dae/html5/thumbnails/21.jpg)
Fill Shape
Continue in Form1_Paint
![Page 22: Graphics](https://reader034.vdocuments.us/reader034/viewer/2022052618/554c6ca1b4c9057c778b4dae/html5/thumbnails/22.jpg)
Fill Shape
![Page 23: Graphics](https://reader034.vdocuments.us/reader034/viewer/2022052618/554c6ca1b4c9057c778b4dae/html5/thumbnails/23.jpg)
Draw Polygon
Continue in Form1_Paint
![Page 24: Graphics](https://reader034.vdocuments.us/reader034/viewer/2022052618/554c6ca1b4c9057c778b4dae/html5/thumbnails/24.jpg)
Draw Polygon
![Page 25: Graphics](https://reader034.vdocuments.us/reader034/viewer/2022052618/554c6ca1b4c9057c778b4dae/html5/thumbnails/25.jpg)
Draw Text
Continue in Form1_Paint
![Page 26: Graphics](https://reader034.vdocuments.us/reader034/viewer/2022052618/554c6ca1b4c9057c778b4dae/html5/thumbnails/26.jpg)
Draw Text
![Page 27: Graphics](https://reader034.vdocuments.us/reader034/viewer/2022052618/554c6ca1b4c9057c778b4dae/html5/thumbnails/27.jpg)
Try it yourself: drawing cross for mousedown
VID
EO
![Page 28: Graphics](https://reader034.vdocuments.us/reader034/viewer/2022052618/554c6ca1b4c9057c778b4dae/html5/thumbnails/28.jpg)
Try it yourself!
Hint: use the mousedown event
Hint: use points (e.X-5, e.Y-5) , (e.X+5, e.Y+5), (e.X+5, e.Y-5) , (e.X-5, e.Y+5)
![Page 29: Graphics](https://reader034.vdocuments.us/reader034/viewer/2022052618/554c6ca1b4c9057c778b4dae/html5/thumbnails/29.jpg)
Possible solution
![Page 30: Graphics](https://reader034.vdocuments.us/reader034/viewer/2022052618/554c6ca1b4c9057c778b4dae/html5/thumbnails/30.jpg)
Draw fix line follow mouse
![Page 31: Graphics](https://reader034.vdocuments.us/reader034/viewer/2022052618/554c6ca1b4c9057c778b4dae/html5/thumbnails/31.jpg)
Draw fix line follow mouse
New project “lineFollowMouse”
![Page 32: Graphics](https://reader034.vdocuments.us/reader034/viewer/2022052618/554c6ca1b4c9057c778b4dae/html5/thumbnails/32.jpg)
Draw fix line follow mouse
// Get the mouse position
![Page 33: Graphics](https://reader034.vdocuments.us/reader034/viewer/2022052618/554c6ca1b4c9057c778b4dae/html5/thumbnails/33.jpg)
Demo: flexi line follow mouse
VID
EO
![Page 34: Graphics](https://reader034.vdocuments.us/reader034/viewer/2022052618/554c6ca1b4c9057c778b4dae/html5/thumbnails/34.jpg)
Flexi line follow mouse
// Get the mouse position
![Page 35: Graphics](https://reader034.vdocuments.us/reader034/viewer/2022052618/554c6ca1b4c9057c778b4dae/html5/thumbnails/35.jpg)
Demo: Simple pixel drawing
VID
EO
![Page 36: Graphics](https://reader034.vdocuments.us/reader034/viewer/2022052618/554c6ca1b4c9057c778b4dae/html5/thumbnails/36.jpg)
Simple pixel drawing
New project: SimplePixelDrawing
![Page 37: Graphics](https://reader034.vdocuments.us/reader034/viewer/2022052618/554c6ca1b4c9057c778b4dae/html5/thumbnails/37.jpg)
Simple pixel drawing
![Page 38: Graphics](https://reader034.vdocuments.us/reader034/viewer/2022052618/554c6ca1b4c9057c778b4dae/html5/thumbnails/38.jpg)
Simple pixel drawing
![Page 39: Graphics](https://reader034.vdocuments.us/reader034/viewer/2022052618/554c6ca1b4c9057c778b4dae/html5/thumbnails/39.jpg)
Simple pixel drawing
to continue next page
![Page 40: Graphics](https://reader034.vdocuments.us/reader034/viewer/2022052618/554c6ca1b4c9057c778b4dae/html5/thumbnails/40.jpg)
Simple pixel drawing
continue from previous page
![Page 41: Graphics](https://reader034.vdocuments.us/reader034/viewer/2022052618/554c6ca1b4c9057c778b4dae/html5/thumbnails/41.jpg)
Summary
Surface, pen and brush
Draw Lines
Draw Rectangles
Draw Polygons
Draw Text