Android advanced plotting

 Advanced canvas drawing

  We have introduced canvas, where we have learned how to create our own view. In Chapter 7th, canvas is used to overwrite mapview labels.

  Canvas is a common concept in graphic programming. It usually consists of three basic drawing components:

  
Canvas Provides a plotting method to draw basic images to the underlying bitmap.
  Paint Also known as "brush", paint can specify how to draw a basic image in place.
  Bitmap The drawing surface.

    The android plotting API supports transparency, gradient filling, circular edges and rectangles, and anti-aliasing. Unfortunately, due to resource restrictions, it does not support vector graphics. It uses a redrawing of a traditional grating style.
  The grating method improves the efficiency, but changing a paint object will not affect the basic image that has been drawn, and it will only affect new elements.

  Tip:
  If you have a Windows development background, Android's 2D drawing capability is roughly equivalent to that of GDI +.

  1. What can I draw?

  The canvas class encapsulates the bitmap used as the drawing surface. It also provides the draw * method for design.

  The following list provides a brief description of the available basic images, but does not go deep into the details of each draw method:

  Drawargb/drawrgb/drawcolor Fill the canvas with a single color.
  Drawarc Draw an arc between two corners of a rectangle.
  Drawbitmap Draw a bitmap on the canvas. You can change the appearance of the target bitmap by specifying the target size or using a matrix.
  Drawbitmapmesh A mesh (network) is used to draw a bitmap. It can operate the appearance of the target through the points in the mobile network.
  Drawcircle Draws a circle with a specified radius from the center of a given point.
  Drawline (s) Draw a straight line between two points.
  Drawoval Draws an ellipse Based on the specified rectangle.
  Drawpaint Fill the entire canvas with the specified paint
  Drawpath Draw the specified path. A path object is often used to save a set of basic images in an object.
  Drawpicture Draws a picture object in the specified rectangle.
  Drawpostext Draws a text string that specifies the offset of each character.
  Drawrect Draw a rectangle.
  Drawroundrect Draw a rounded rectangle.
  Drawtext Draw a text string on the canvas. The text font, size, and rendering attributes are all set in the paint object used to render the text.
  Drawtextonpath Draws text on a specified path.
  Drawvertices Draw a series of triangles and specify them through a series of vertices.

  Each of these drawing methods needs to specify a paint object to render it. In the following sections, you will learn how to create and modify a paint object to complete most of the work in the drawing.

  2. Complete the work from the paint.

  The paint class is equivalent to a paint brush and a palette. It can select how to use the draw method described above to render the Basic Drawing drawn on the canvas. By modifying the paint object, you can control the color, style, Font, and special effects when drawing. In the simplest way, setcolor allows you to select a paint color, while the style of the paint object (controlled by setstyle) determines the outline of the Drawing Object (stroke ), or fill each part (fill), or do both (stroke_and_fill)

  In addition to these simple controls, the paint class also supports transparency. In addition, it can also be modified by using a variety of shadows, filters, and effects, this provides a palette consisting of richer and more complex paint brushes and pigments.

  The android SDK contains some excellent examples, which illustrate most of the functions available in the paint class. You can find them in the graphics subdirectory of API demos:

  
SDK root folder] \ samples \ apidemos \ SRC \ com \ Android \ samples \ graphics

  In the following section, you will learn and use some of the features. These are just a simple list of the effects they can achieve (such as gradient and edge relief), without listing all the possible situations in detail.

  Usage transparency

    All colors in Android contain an opaque component (alpha channel ).
    When creating a color, you can use the argb or parsecolor method to define its alpha value, as shown below:

Java code:

1.  // Use red color and make it 50% transparent
   
2.  Int opacity = 127;
   
3.  Int intcolor = color. argb (opacity, 255, 0, 0 );
   
4.  Int parsedcolor = color. parsecolor ("#7fff0000 ");
   
5. 
   

Copy code

    Alternatively, you can use the setalpha method to set the transparency of an existing paint object:

Java code:

1.  // Make the color 50% transparent
   
2.  Int opacity = 127;
   
3.  Mypaint. setalpha (opacity );

Copy code

  Creating a color that is not 100% transparent means that any basic image drawn using it will be partially transparent-that is, all the basic images drawn under it will be partially visible.

  You can use transparent effects in any color class or method, including paint, shader, and mask filter.

  Shader Introduction

  The derived class of the shader class allows you to create a paint that allows you to fill the Drawing Object with multiple solid colors.

  The most common use of shader is to define gradient fill; gradient is one of the best ways to add depth and texture to 2D images. Android contains a bitmap shader and a compose shader. It also contains three gradient shader.
  It is meaningless to try to use a language to describe the drawing effect, so you can see how each shader works. In the figure, lineargradient, radialgradient, and sweepgradient are represented from left to right.
Tip:

  Composershader is not included. It can create a combination of multiple shader and bitmapshader, so that a drawing brush can be created based on a bitmap image.

  To use a shader during plotting, you can use the setshader method to apply it to a painting, as shown in the following code:
  Paint shaderpaint = new paint (); 
  Shaderpaint. setshader (mylineargradient );

  Anything you draw using this paint will be filled with the shader you specified, rather than the color of the paint.
  
Define a gradient shader

  As shown above, the gradient shader allows you to fill the image with the color that changes alternately. You can define the gradient as a simple alternative of the two colors, as shown below:

Java code:

1.  Int colorfrom = color. Black;
   
2.  Int colorto = color. White;
   
3.  Lineargradient lineargradientshader = new lineargradient (x1, Y1, X2, Y2, colorfrom, colorto, tilemode. Clamp );
   
4. 
   

Copy code

    Alternatively, you can define a more complex color sequence for distribution according to the set ratio, as shown in the following radialgradientshader example:

Java code:

1.  Int [] gradientcolors = new int [3];
   
2.  Gradientcolors [0] = color. Green;
   
3.  Gradientcolors [1] = color. Yellow;
   
4.  Gradientcolors [2] = color. Red;
   
5.  Float [] gradientpositions = new float [3];
   
6.  Gradientpositions [0] = 0.0f;
   
7.  Gradientpositions [1] = 0.5f;
   
8.  Gradientpositions [2] = 1.0f;
   
9.  Radialgradient radialgradientshader = new radialgradient (centerx, centery, radius, gradientcolors, gradientpositions, tilemode. Clamp );
   
10. 
    

Copy code

  Each gradient shader (linear, radiant, and scanned) can be used to define gradient fill.

  
Use shader tilemodes
  The image size of the gradient shader can be explicitly defined using a boundary rectangle or the center point and radius length. Bitmap shader can determine the size of its image brush based on its bitmap size.