CS 2302, Fall 2014 Graphics Concepts Drawing Paths 12/1/2014 2 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. 12/1/2014 Sometimes the pen leaves a trace, sometimes it does not 3 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 12/1/2014 4 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 12/1/2014 5 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 12/1/2014 6 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 12/1/2014 7 Fill the path 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 12/1/2014 8 Cubic Demo Screenshot 12/1/2014 9 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 12/1/2014 10 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 12/1/2014 11 Define a final instance variable and initialize it in the