Android study Note 12: Image Rendering (Shader)

In Android, the Shader class is provided for rendering images and some geometric figures.

The Shader class includes five direct subclasses: BitmapShader, ComposeShader, LinearGradient, RadialGradient, and SweepGradient. Here, BitmapShader is used for image rendering; ComposeShader is used for hybrid rendering; LinearGradient is used for linear rendering; RadialGradient is used for Ring rendering; and SweepGradient is used for gradient rendering.

When using the Shader class for Image Rendering, you first need to build the Shader object, then set the rendering object through the setShader () method of the Paint, and finally draw the Paint object to the screen.

Note that you need to build different objects when rendering images in different ways.

1. BitmapShader (Image Rendering)

BitmapShader uses a bitmap as the texture to fill a region. It can be imagined that the tile is placed in an area, but the tile here is just a bitmap.

The BitmapShader function is prototype:

Public BitmapShader (Bitmap bitmap, Shader. TileMode tileX, Shader. TileMode tileY );

The bitmap parameter indicates the bitmap used for texture filling. The tileX parameter indicates the bitmap link in the X direction of the bitmap. The tileY parameter indicates the bitmap link in the Y direction of the bitmap.

Shader. TileMode has three options: CLAMP, REPEAT, and MIRROR.

The CLAMP function is to copy the edge color to color the area out of the range if the Renderer exceeds the original boundary range. REPEAT is used to repeatedly render the bitmap in the form of tiled horizontal and vertical. MIRROR is used to repeatedly render the bitmap in the form of an image either horizontally or vertically.

2. LinearGradient (linear rendering)

LinearGradient is used to achieve linear gradient of colors in a certain area.

The function prototype of LinearGradient is:

Public LinearGradient (float x0, float y0, float x1, float y1, int [] colors, float [] positions, Shader. TileMode tile );

The x0 parameter indicates the x coordinate of the starting point of the gradient; The y0 parameter indicates the y coordinate of the starting point of the gradient; the x1 parameter indicates the x coordinate of the end point of the gradient; and The y1 parameter indicates the y coordinate of the end point of the gradient; the colors parameter indicates the gradient color array. The positions parameter specifies the relative position of the color array. the tile parameter indicates the tile mode.

Generally, the positions parameter is set to null, indicating that the color array is evenly distributed in the form of a diagonal line.

3. ComposeShader (hybrid rendering)

ComposeShader overlays rendering effects, such as BitmapShader and LinearGradient.

The function prototype of ComposeShader is:

Public ComposeShader (Shader shaderA, Shader shaderB, PorterDuff. Mode mode );

The shaderA parameter indicates a certain rendering effect, the shaderB parameter also indicates a certain rendering effect, and the mode parameter indicates the superposition mode of the two rendering effects.

PorterDuff. there are 16 parameters available for Mode: CLEAR, SRC, DST, SRC_OVER, DST_OVER, SRC_IN, DST_IN, SRC_OUT, DST_OUT, SRC_ATOP, DST_ATOP, XOR, DARKEN, LIGHTEN, MULTIPLY, and SCREEN.

The specific effect 1 of these 16 Superposition Modes is shown in.

 

Figure 1 overlay Effect

4. RadialGradient (ring rendering)

RadialGradient is used to achieve a ring gradient in a certain area.

The original function of RadialGradient is:

Public RadialGradient (float x, float y, float radius, int [] colors, float [] positions, Shader. TileMode tile );

Here, parameter x represents the center x coordinate of the ring, parameter y represents the center y coordinate of the ring, parameter radius represents the radius of the ring, and parameter colors represents the color array of the ring gradient; the positions parameter is used to specify the relative position of the color array. the tile parameter indicates the tile mode.

5. SweepGradient (gradient rendering)

SweepGradient, also known as scan rendering, refers to the rendering of scanning effects formed by rotating a week in a center in the clockwise direction of the X axis.

The function prototype of SweepGradient is:

Public SweepGradient (float cx, float cy, int [] colors, float [] positions );

The cx parameter indicates the scanning center x coordinate, the cy parameter indicates the scanning center y coordinate, the colors parameter indicates the gradient color array, and the positions parameter specifies the relative position of the color array.

6. Instance

In this example, the above five rendering effects are achieved respectively. Result 2. Among them, the top is BitmapShader; the left is LinearGradient; the right is RadialGradient; the left is ComposeShader (mixed effect of LinearGradient and RadialGradient ); the right side of the third row is SweepGradient.

 

Figure 2 rendering Effect

The MyView class is defined to draw various rendering effects. The MyView. java source code is as follows.

MyView. Java source code
1 package com. example. android_imageshader;
2
3 import android. annotation. SuppressLint;
4 import android. content. Context;
5 import android. graphics. Bitmap;
6 import android. graphics. BitmapShader;
7 import android. graphics. Canvas;
8 import android. graphics. Color;
9 import android. graphics. ComposeShader;
10 import android. graphics. LinearGradient;
11 import android. graphics. Paint;
12 import android. graphics. PorterDuff;
13 import android. graphics. RadialGradient;
14 import android. graphics. RectF;
15 import android. graphics. Shader;
16 import android. graphics. SweepGradient;
17 import android. graphics. drawable. BitmapDrawable;
18 import android. view. View;
19
20 @ SuppressLint ({"DrawAllocation", "DrawAllocation", "DrawAllocation "})
21 public class MyView extends View {
22
23 Bitmap mBitmap = null; // Bitmap object
24 Shader mBitmapShader = null; // Bitmap rendering object
25 Shader mLinearGradient = null; // linear gradient rendering object
26 Shader mComposeShader = null; // mixed rendering object
27 Shader mRadialGradient = null; // ring rendering object
28 Shader mSweepGradient = null; // gradient rendering object
29
30 public MyView (Context context ){
31 super (context );
32
33 // load image resources
34 mBitmap = (BitmapDrawable) getResources ().
35 getDrawable (R. drawable. snow). getBitmap ();
36
37 // create a Bitmap rendering object
38 mBitmapShader = new BitmapShader (mBitmap, Shader. TileMode. REPEAT,
39 Shader. TileMode. MIRROR );
40
41 // create a linear rendering object
42 int mColorLinear [] = {Color. RED, Color. GREEN, Color. BLUE, Color. WHITE };
43 mLinearGradient = new LinearGradient (0, 0,100,100, mColorLinear, null,
44 Shader. TileMode. REPEAT );
45
46 // create a ring rendering object
47 int mColorRadial [] = {Color. GREEN, Color. RED, Color. BLUE, Color. WHITE };
48 mRadialGradient = new RadialGradient (350,325, 75, mColorRadial, null,
49 Shader. TileMode. REPEAT );
50
51 // create a hybrid rendering object
52 mComposeShader = new ComposeShader (mLinearGradient, mRadialGradient,
53 PorterDuff. Mode. DARKEN );
54
55 // create a trapezoid rendering object
56 int mColorSweep [] = {Color. GREEN, Color. RED, Color. BLUE, Color. YELLOW, Color. GREEN };
57 mSweepGradient = new SweepGradient (370,495, mColorSweep, null );
58}
59
60 public void onDraw (Canvas canvas ){
61 super. onDraw (canvas );
62
63 Paint mPaint = new Paint ();
64 canvas. drawColor (Color. GRAY); // set the background to GRAY.
65
66 // draw the Bitmap rendered elliptic
67 mPaint. setShader (mBitmapShader );
68 canvas. drawOval (new RectF (90, 20, 90 + mBitmap. getWidth (),
69 20 + mBitmap. getHeight (), mPaint );
70
71 // draw a linear gradient rectangle
72 mPaint. setShader (mLinearGradient );
73 canvas. drawRect (10,250,250,400, mPaint );
74
75 // draw a circle with a ring gradient
76 mPaint. setShader (mRadialGradient );
77 canvas. drawCircle (350,325, 75, mPaint );
78
79 // draw a rectangle with a mixed gradient (linear and annular)
80 mPaint. setShader (mComposeShader );
81 canvas. drawRect (10,420,250,570, mPaint );
82
83 // draw a trapezoid gradient rectangle
84 mPaint. setShader (mSweepGradient );
85 canvas. drawRect (270,420,470,570, mPaint );
86}
87}