1 / 11
Télécharger la présentation

CS 2302, Fall 2014

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Graphics Concepts CS 2302, Fall 2014

  2. Drawing Paths

  3. Drawing models • Drawing models explain how color is applied to the screen to create graphics. • We’ve not had to worry about that so far because we’ve worked with very simple figures. • However, even to draw something as simple as a triangle and fill it in, our tools are not adequate. • Drawing models usually work with a pen which is moved around. • Sometimes the pen leaves a trace, sometimes it does not • The color of the trace the pen leaves can change • If the pen traces a closed curve, that is it finishes at the point where it started, the area enclosed can be filled.

  4. Turtle Graphics • One drawing model, called Turtle Graphics was popularized by a language called Logo. • The pen is called a turtle in this model • In this model, the turtle has a position and heading. • The turtle can turn in place, changing its heading • The turtle can move a given distance in the direction it is currently heading

  5. Android Paths • The model used in Android for paths is similar, but only works with position. • The pen has a current position at any time • The pen can be moved to another position. The pen can leave a trace or not. • The pen can move in a straight line to another position or along a variety of curved segments. • If the path is the outline of an area to be filled, the path is ended by closing the path. • Once the Path is created, it must be drawn to be visible • Path Reference

  6. Polygonal Paths • Paths made of line segments • Create a Path object • Apply methods • moveTo(x,y) • lineTo(x,y) • Close() • Use drawPath to make display the path

  7. Examples • We'll continue using the example project we used earlier • Each example will be implemented as a new widget that can be dragged into the user interface • The first example will be a path that has five line segments: two will be invisible, three will be visible • Outline the path • Note the visible and invisible segments • Fill the path • Make all segments visible and fill the path

  8. Cubic Paths • The cubic path demo app will show how a cubic path segment works • A cubic path segment is defined by • Two endpoints • Two control points

  9. Cubic Demo Screenshot

  10. Diamonds • Another view will draw diamonds, create a new View class • A diamond is created by connecting the midpoints of the sides of a rectangle • Write a method that will draw a diamond given a Canvas, fill color, outline color and the coordinates of the bounding rectangle • In onDraw, draw a single diamond

  11. Resources • It will be useful to have several constants defined in a resource files • These constants will specify certain characteristics about the diamonds that will be drawn • The first will be an integer resource that specifies the stroke width of the border of each diamond • Define the resource • Use the resource in the drawing program • Define a final instance variable and initialize it in the constructor

More Related