Android Elite Biography-the sixth chapter: Android mapping mechanism and processing skills

• 6.1 Size information for the screen
  
  • 6.1.1 Screen Parameters
  • 6.1.2 System screen Density
  • 6.1.3 Independent pixel density DP
  • 6.1.4 Unit Conversions
• 6.2 2D Drawing Basics
• 6.3 Android XML Drawing
  
  • 6.3.1 Bitmap
  • 6.3.2 Shape
  • 6.3.3 Layer
  • 6.3.4 Selector
• 6.4 Android Drawing Tips
  
  • 6.4.1 Canvas
  • 6.4.2 Layer Layers
• 6.5 color effects processing for Android image processing
  
  • 6.5.1 Color Matrix Analysis
  • 6.5.2 Android Color Matrix--colormatrix
  • 6.5.3 Common Image color matrix processing effect
  • 6.5.4 Pixel Point Analysis
  • 6.5.5 Common image pixel point processing effect
• 6.6 Graphics effects processing for Android image processing
  
  • 6.6.1 android morph Matrix--matrix
  • 6.6.2 Pixel block Analysis
• 6.7 android Image processing brush effect processing
  
  • 6.7.1 Porterduffxfermode
  • 6.7.2 Shader
  • 6.7.3 Patheffect
• 6.8 View's twin brother--surfaceview
  
  • The difference between 6.8.1 Surfaceview and view
  • Use of 6.8.2 Surfaceview
  • 6.8.3 Surfaceview Instances

Because this chapter is difficult to understand, so most of the knowledge points are excerpts from the original text, if it is not studied linear algebra students, it is more difficult, but to overcome it, you are the only way to advanced senior engineer, the article is longer, please be patient to watch

No knowledge points

• Screen Size: The length of the screen diagonal, usually measured in inches
• Resolution: Number of pixels on the phone screen
• PPI: pixels per inch, also called DPI, is obtained by dividing the diagonal pixels by the screen size.

The Android system uses MDPI, a screen with a density value of 160, as the standard, on this screen 1PX=1DP

Ldpi:mdpi:hdpi:xhdpi:xxhdpi=3:4:6:8:12

The purpose of adding 0.5f here is: rounding

Dp==dip

The system provides the Typedvalue class to help us transform

The paint as an important element has the following methods:

• Setantialias (): Set the brush's jagged effect
• SetColor (): Sets the color of the brush
• Setargb (): Sets the brush's A, R, G, b values
• Setalpha (): Sets the alpha value of the brush
• Settextsize (): Set the size of the font
• SetStyle (): Sets the style of the brush (hollow or solid)
• Setstrokewidth (): Sets the width of the hollow border

Set the paint style to draw a hollow or solid rectangle:

• Paint.setstyle (Paint.Style.STROKE): Hollow Effect
• Paint.setstyle (Paint.Style.FILL): Solid effect

The system provides a drawing method by providing a canvas object:

• Canvas.drawpoint (x, y, paint): Draw point
• Canvas.drawline (StartX, Starty, EndX, EndY, paint): Drawing lines
• Canvas.drawlines (New float[]{startx1, startY1, endX1, endY1,......, startxn, Startyn, Endxn, Endyn}, Paint): Draw Multiple lines
• Canvas.drawrect (left, top, right, bottom, paint): Draw Rectangle
• Canvas.drawroundrect (left, top, right, bottom, RadiusX, radiusy, paint): Draw rounded rectangles
• Canvas.drawcircle (Circlex, Circley, radius, paint): Draw a circle
• Canvas.drawoval (left, top, right, bottom, paint): Draw ellipse
• Canvas.drawtext (text, StartX, Starty, paint): Drawing text
• Canvas.drawpostext (text, new Float[]{x1,y1,x2,y2,...... Xn,yn}, Paint): Draws text at the specified location
• Path path=new path ();
  Path.moveto (50, 50);
  Path.lineto (100, 100);
  Path.lineto (100, 300);
  Path.lineto (300, 50);
  Canvas.drawpath (path, paint): Draw path

• Paint.setstyle (Paint.Style.STROKE);
  DrawArc (left, top, Right,bottom, StartAngle, SweepAngle, True, paint): Draw sector
• Paint.setstyle (Paint.Style.STROKE);
  DrawArc (left, top, Right,bottom, StartAngle, SweepAngle, False, paint): drawing arcs
• Paint.setstyle (Paint.Style.FILL);
  DrawArc (left, top, Right,bottom, StartAngle, SweepAngle, True, paint): Draw a solid sector
• Paint.setstyle (Paint.Style.FILL);
  DrawArc (left, top, Right,bottom, StartAngle, SweepAngle, False, paint): Draw a solid arc

No knowledge points

By using bitmap in XML, you can convert the picture directly to the bitmap used in the program.

Shape allows you to draw various shapes in XML

The shadow effect that is achieved by the gradient below

The effect of creating a picture overlay by layer

Selector's role is to help developers implement event feedback in static drawings by setting different images for different events to return different effects in the program based on user input.

The following example implements a fillet proof selector with a click-Feedback effect.

No knowledge points

Canvas provides several very useful ways to do this:

• Canvas.save (): Save the canvas, save all previously drawn images, and let the subsequent actions act as if you were working on a new layer
• Canvas.restore (): All images drawn after save () are merged with the image before Save (), which can be understood as a merge layer action in Photoshop
• Canvas.translate (): Canvas panning
• Canvas.roate (): Canvas flip

With an example-the dashboard-to understand these methods, the dashboard is divided into the following elements:

• Instrument panel: Outside of the big disc
• Tick marks: Contains four long tick marks and other short tick lines
• Scale value: Contains large tick values and other small scale values that correspond to long tick lines
• Pointer: middle pointer, one coarse and one thin two pointers

Instrument panel ... See Classic code Case one

A complex picture can be stacked together by a number of graphs to form a complex image, using the Savelayer () method to create a layer that is also managed by a stack-based structure

Android by calling the Savelayer () method, the Savelayeralpha () method pushes a layer into the stack, using the Restore () method, the Restoretocount () method to stack a layer, modeled after the API Demos An example inside to use the layer

• When the transparency is 127, that is translucent
• When transparency is 255, it is completely opaque
• When transparency is 0 o'clock, it is completely transparent

Bitmap pictures are composed of lattice and color values, so-called lattice is a matrix containing pixels, each element corresponds to a pixel of the picture. and the color value--argb, respectively corresponding to the transparency, red, green, blue four channel components, they together determine the color of each pixel point display

In color processing, we usually describe a picture in three angles:

• Hue: The color of the object's spread
• Saturation: The purity of the color, from 0 (gray)-100% (saturated) to describe
• Brightness: The relative degree of light and shade of color

In Android, the system uses a color matrix--colormatrix to deal with the effects of these colors, and the color matrix in Android is 4x5 's digital matrix, which he uses to process color colors, and for each pixel point, has a color component matrix to hold the ARGB value

According to the definition of the front face matrix A and C, the matrix multiplication algorithm can be used to obtain:

The multiplication of matrix operations is calculated as follows:

We look at the color matrix A

From this formula can be found

• The first line of ABCDE is used to determine the new color value r--red
• The second row of FGHIJ is used to determine the new color value g--Green
• The third row of Kimno is used to determine the new color value b--Blue
• The Pqrst of line four is used to determine the new color value a--transparency
• The fifth column--ejot values in matrix A are used to determine offset in each component, that is, offsets

This is explained by a small example:
First, take a look at the Matrix transformation Calculation formula, the R component as an example, the calculation process is as follows:

If A=1,b,c,d,e is equal to 0, then the result of the calculation is r1=r, so we can construct a matrix

If the matrix formula is brought into the R1=AC, the r1=r can be obtained according to the multiplication algorithm of the matrix. Therefore, this matrix is usually used as the initial color matrix to use, and he will not make any changes to the original color

So when we want to change the color value, there are usually two ways. One is to change the color of offset, that is, the value of the offset to modify the color component. Another way to directly change the coefficients of the corresponding RGBA values to adjust the value of the color component

From the previous analysis, you can know that you want to modify the value of R1, as long as the value of the fifth column is modified. That is, the offset of the color is changed, the other value holds the value of the initial matrix,

In the above matrix, we modified the R, g of the corresponding color offset, then the final processing result is the image of red, green, respectively, increased by 100. And we know that red mixed green will get yellow, so the final color processing result is to make the whole picture of the hue of the yellow

If you modify one of the coefficient values in the color component, and the other only retains the value of the initial matrix,

In the above matrix, change the G component corresponding to the coefficient g, so that after the rectangle operation G component will become twice times, the final effect is the image of the hue more green

Here's an example of how to change the hue, saturation, and brightness of an image through a matrix:

• Hue: setRotate (int axis, float degree), the first parameter uses 0, 1, 2 for red, Green, blue Three colors, the second parameter needs to process the value

• Saturation: setsaturation (float Sat), parameters represent values for setting saturation

• Brightness: Setscale (float rscale,float gscale,float bscale,float ascale), parameters are red, green, blue, transparency luminance size values

In addition to using the above three methods for color effect processing alone, the Postconcat () method is provided to mix the effect of the matrix to overlay processing effects

Adjust hue, saturation, brightness by seekbar ... See Classic code review Case II

Simulates the 4x5 color matrix ... See Classic code review case three

• Gray effect

• Image inversion

• Nostalgic effect

• de-color effect

• High degree of saturation

In Android, the system provides the Bitmap.getpixels () method to help us extract the pixels from the entire bitmap and save them in an array:

The specific meanings of these parameters are as follows:

• Pixels: Array to receive bitmap color values
• Offset: The first pixel index value written to pixels[]
• Line spacing in stride:pixels[]
• X: The x-coordinate value of the first pixel read from a bitmap
• Y: the y-coordinate value of the first pixel read from a bitmap
• Width: The pixel widths that are read from each row
• Height: number of rows read

The following code is commonly used:

Next get the specific ARGB value for each pixel:

The next step is to modify the pixel value to produce a new pixel value

Finally, use our new pixel value

Negative effects, old photo effects, embossed effects ... See Classic code review case four

No knowledge points

For graphics transformations, the system provides a 3x3 proof to handle:

As with the color matrix, the calculation method is multiplied by the matrix:

As with the color matrix, there is an initial matrix:

Distortion processing for images consists of the following four types of basic transformations:

• Translate: Translation Transformation
• Rotate: Rotation transformation
• Scale: Scaling transformations
• Skew: Split-cut transformation

Translation transformation: That is, the translation of each pixel point is translated, the calculation can be found as follows translation formula:

Rotation transformation: The rotation transformation at any point as the center of rotation is accomplished by the following three steps

• Translate coordinates origin to O point
• Rotation transformation using the previously mentioned rotation method centered on the origin of the coordinates
• Restore the coordinate origin

Zoom Transform: The effect of the scale transformation is calculated as follows

Error-cutting transformation: The effect of the error-cutting transformation is calculated as follows

Learn about four graph transformation matrices, which can be converted to a graph transformation matrix by the Setvalues () method:

The Matrix class in Android also encapsulates several ways to do this:

• Matrix.setrotate (): Rotation transform
• Matrix.settranslate (): Translation transform
• Matrix.setscale (): Zoom transform
• Matrix.setskew (): Wrong tangent transform
• Pre () and post (): Provides the front and back multiplication of matrices

For example, the different operations of pre-and post-multiplication are described:

• Pan to (300, 100) first
• and rotate it 45 degrees.
• Finally pan to (200, 200)

If you use a post-multiply operation, the code is as follows:

If a pre-multiplication operation is used, the code is as follows:

Drawbitmapmesh () is similar to manipulating pixels to change color, except that it divides the image into small pieces and modifies the entire image by changing each block of images:

Parametric analysis:

• Bitmap: The image that will be distorted
• Meshwidth: Number of horizontal meshes required
• Meshheight: Number of vertical meshes required
• Verts: An array of coordinates for the mesh intersection point
• The number of (x, y) coordinate pairs that start skipping in the vertoffset:verts array

Waving flag ... See Classic code review case five

Before drawing the time also mentioned some of the brush methods, here is no longer introduced

Porterduffxfermod is set to show the intersection area of two layers, DST is the first drawing, and SRC is the post-drawing

Take a rounded picture as an example:

, because the picture is too big, can only see one corner

Scratch Card effect ... See Classic code review case six

Shader is also called a shader. Renderer, which can achieve rendering, gradient and other effects, Android shader include the following:

• Bitmapshader: Bitmap Shader
• LinearGradient: Linear shader
• Radialgradient: Beam Shader
• Sweepgradient: trapezoidal Shader
• Composeshader: Mixed shader

There are three modes of Bitmapshader which can be selected:

• Clamp stretch: Stretches the last pixel of the picture, repeating
• Repeat repeat: horizontal, longitudinal repetition
• Mirror Mirror: Cross-over and repeat, constantly flipping and repeating

The following is an example of a circular picture:

The following changes the Tilemode to repeat:

Using lineargradient:

Combining the front porterduffxfermode and the newly learned lineargradient, make a reflection of the film

Reflection Image effect ... See Classic code review case Seven

Let's start with an intuitive picture:

Android offers several ways to draw Patheffect:

• No effect.
• Cornerpatheffect: Turning corners become sleek
• Discretepatheffect: Many miscellaneous points are generated on the line segment
• Dashpatheffect: Draw a dashed line, using one data to set the interval between each point
• Pathdashpatheffect: Draw dashed line, can use square dotted line and round dot dashed line
• Composepatheffect: The characteristics of two paths (Patheffect) can be combined arbitrarily

We use an example to understand these effects:

With each path drawn, the canvas is panned, allowing various patheffect to be drawn in sequence.

No knowledge points

View of the drawing refresh interval of 16ms, if you need to perform all the operations within 16MS, then in the user vision, there will be no lag feeling, otherwise, will be stuck, so you can consider using Surfaceview to replace the view of the drawing

Usually you'll see a hint like this in log:

The main differences between Surfaceview and view:

• View is primarily intended for active updates, while SURFACEVICW is primarily intended for passive updates, such as frequent refreshes
• View refreshes the screen in the main thread, and Surfaceview usually refreshes the page with a thread
• View does not use a double buffering mechanism when drawing, and SURFACEVICW has implemented a double buffering mechanism in the underlying implementation mechanism

The bottom line is that if your custom view needs to be refreshed frequently, or if the Refresh data processing volume is large, on can consider using Surfaceview instead of view

Surfaceview Steps to use:

• Create Surfaceview inherit from Surfaceview, and implement both interfaces--surfaceholder.callback and runnable
• Initializes the Surfacholder object and registers the Surfaceholder callback method
• Draw the Canvas object with the Surfacholder object Lockcanvas () method and submit the canvas content through the Unlockcanvasandpost (Mcanvas) method

The entire template code that uses Surfaceview:

The only thing to note is that the Mholder.unlockcanvasandpost (Mcanvas) method is placed in the finally code block in the drawing to ensure that the content is committed every time

Sine curve ... See Classic code review case eight
Drawing board ... See Classic code review case Nine

Layout file

Activity file

Layout file

Activity file

Key: Pass a color matrix into the brush and draw the original diagram above the new diagram

Layout file

Activity file

Tool class

I am also ignorant, do not understand this example

Classic Review Source download

Github:https://github.com/csdnhensen/qunyingzhuang

Android Elite Biography-the sixth chapter: Android mapping mechanism and processing skills