Android's Paint API - Shader (image rendering)

1. Detailed construction method

1) BitmapShader (image rendering)

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

Use a bitmap as a texture to fill a certain area, and the parameters are as follows:

bitmap : the bitmap used as filling;

tileX : The connection form of the bitmap in the X-axis direction;

tileY : The connection form of the bitmap in the Y-axis direction;

And this Shader.TileMode has three types:

CLAMP means that if the renderer exceeds the original boundary range, the edge color will be copied to color the out-of-range area

REPEAT is repeated rendering in tiled form

MIRROR is to repeatedly render the bitmap in a mirrored manner both horizontally and vertically.

2) ComposeShader (mixed rendering)

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

The superposition of rendering effects, you know what you see when you see PorterDuff? For example, the mixed rendering effect of BitmapShader and LinearGradient. The parameters are in order:

shaderA : the first rendering effect

shaderB : the second rendering effect

mode : Overlay mode of the two rendering effects

3) LinearGradient (linear rendering)

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

Realize the linear gradient effect of the color in a certain area, the parameters are as follows:

x0 : The x coordinate of the starting point of the gradient

y0 : The y coordinate of the starting point of the gradient

x1 : the x-coordinate of the end point of the gradient

y1 : the y coordinate of the end point of the gradient

colors : an array of colors for the gradient

positions : the relative position of the color array

tile : tiling method

4) RadialGradient (circular rendering)

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

Realize the circular gradient effect of the color in a certain area, the parameters are as follows:

x : the x coordinate of the center of the circle

y : the y coordinate of the center of the ring

radius : the radius of the ring

colors : an array of colors for the circular gradient

positions : Specify the relative position of the color array

tile : tiling method

5) SweepGradient (gradient rendering)

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

Scanning rendering is the effect of rotating a circle around a certain point! The parameters are, in order:

cx : the center x coordinate of the scan

cy : the center y coordinate of the scan

colors : an array of colors for the gradient gradient

positions : Specify the relative position of the color array

Perhaps from the text, we can simply know their corresponding general functions, but we still write a code to verify their functions. After all, there are codes (pictures) and truth~

2. Use the code example:

Running effect diagram :

Implementation code :

BitmapShaderView.java：

/** 
 * Created by Jay on 2015/11/4 0030. 
 */ 
public class BitmapShaderView extends View { 


    private Bitmap mBitmap = null; 
    private ShapeDrawable sDrawable = null; 
    private Paint mPaint = null; 
    private int bitW = 0, bitH = 0 ; //Bitmap width and height 

    private Shader mBitmapShader = null; //Bitmap rendering 
    private Shader mLinearGradient = null; //Linear gradient rendering 
    private Shader mComposeShader = null; //Mixed rendering 
    private Shader mRadialGradient = null; //Circular gradient rendering 
    private Shader mSweepGradient = null; //gradient rendering 


    public BitmapShaderView(Context context) { 
        this(context, null); 
    }

    public BitmapShaderView(Context context, AttributeSet attrs) { 
        super(context, attrs); 
        init(); 
    } 

    public BitmapShaderView(Context context, AttributeSet attrs, int defStyleAttr) { 
        super(context, attrs, defStyleAttr); 
    } 


    private void init() { 

        mBitmap = BitmapFactory.decodeResource(getResources(), R.mipmap.img_cat); 
        bitW = mBitmap.getWidth(); 
        bitH = mBitmap.getHeight(); 
        mPaint = new Paint(); 

        // Create BitmapShader 
        mBitmapShader = new BitmapShader( mBitmap, Shader.TileMode.MIRROR, Shader.TileMode.MIRROR); 

        //Create a LinearGradient and set the gradient color array
        mLinearGradient = new LinearGradient(0, 0, 100, 100, 
                new int[]{Color.RED, Color.GREEN, Color.BLUE, Color.WHITE}, 
                null, Shader.TileMode.REPEAT); 

        //mixed rendering, here Use BitmapShader and LinearGradient for mixing, you can try others~ 
        mComposeShader = new ComposeShader(mBitmapShader, mLLinearGradient, PorterDuff.Mode.DARKEN); 

        //Circular gradient rendering 
        mRadialGradient = new RadialGradient(50, 200, 50, 
                new int[]{ Color.GREEN, Color.RED, Color.BLUE, Color.WHITE}, 
                null, Shader.TileMode.REPEAT); 

        // Gradient rendering 
        mSweepGradient = new SweepGradient(30, 30, new int[]{Color.GREEN, Color. RED, 
                Color.BLUE, Color.WHITE}, null);
 
    } 

    @Override 
    protected void onDraw(Canvas canvas) { 
        super.onDraw(canvas); 

        //Crop the image into an ellipse 
        sDrawable = new ShapeDrawable(new OvalShape()); 
        sDrawable.getPaint().setShader(mBitmapShader); 
        sDrawable.setBounds( 0, 0, bitW, bitH); 
        sDrawable.draw(canvas); 

        //Draw a rectangle with linear gradient 
        mPaint.setShader(mLinearGradient); 
        canvas.drawRect(bitW, 0, bitW * 2, bitH, mPaint); 

        //Draw Mixed rendering effect 
        mPaint.setShader(mComposeShader); 
        canvas.drawRect(0, bitH, bitW , bitH * 2, mPaint); 

        //Draw a circular gradient 
        mPaint.setShader(mRadialGradient); 
        canvas.drawCircle(bitW * 2.8f, bitH / 2, bitH / 2, mPaint) ; 

        // draw the gradient gradient
        mPaint.setShader(mSweepGradient); 
        canvas.drawRect(bitW, bitH, bitW * 2, bitH * 2, mPaint); 


    } 
}