Android高级渲染,画笔渲染通过paint.setShader

1. 基础了解：   

Android高级渲染,图层渲染
 渲染：Shader
    BitmapShader        图形渲染
    LinearGradient   线性渲染
    RadialGradient    环形渲染
    SweepGradient   梯度渲染(扫描渲染)
    ComposeShader   组合渲染
    paint.setShader(bitmapShader);  效果展示,设置画笔渲染，画笔在图层上渲染，图片未摆满控件，摆放模式

1.xml布局：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.denganzhi.myapplication.MainActivity">

    <com.denganzhi.myapplication.MyView
        android:id="@+id/myview"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

    </com.denganzhi.myapplication.MyView>

</LinearLayout>

 2. MyView 控件代码： 
         * 图片平铺模式：
         * TileMode.CLAMP: 图片已经方向，拉伸最后一个像素去平铺空余地方
         * TileMode.MIRROR： 通过翻转铺满剩下地方
         *  TileMode.REPEAT: 不断重复图片填充画面
        bitmapShader = new BitmapShader(bitmap, TileMode.REPEAT, TileMode.REPEAT);
        paint.setShader(bitmapShader);

package com.denganzhi.myapplication;

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.BitmapShader;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.Rect;
import android.support.annotation.Nullable;
import android.util.AttributeSet;
import android.view.View;
import android.graphics.Shader.TileMode;
/**
 * Created by Administrator on 2020/3/14.
 */

public class MyView extends View {

    Bitmap bitmap=null;
    Paint paint=null;
    public MyView(Context context) {
        super(context);
    }


    public MyView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);

          bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.avatar3);
          paint=new Paint();
    }
    private BitmapShader bitmapShader;
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        /**
         * 图片平铺模式：
         * TileMode.CLAMP: 图片已经方向，拉伸最后一个像素去平铺空余地方
         * TileMode.MIRROR： 通过翻转铺满剩下地方
         *  TileMode.REPEAT: 不断重复图片填充画面
         */
        bitmapShader = new BitmapShader(bitmap, TileMode.REPEAT, TileMode.REPEAT);
        paint.setShader(bitmapShader);


        canvas.drawRect(new Rect(0,0,400,400),paint);

        // 绘制在图层去，不会影响空间区域
       // canvas.drawBitmap(bitmap,0,0,paint);
    }
}

3.效果图：

 2.实现通过paint.setShader 绘制圆角图片

原理：paint.setShader把图片绘制在图层中，然后在用canvas在上面绘制一个圆

xml布局：

  <com.denganzhi.myapplication.MyView
        android:id="@+id/myview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
      >
    </com.denganzhi.myapplication.MyView>

Java代码实现： 

package com.denganzhi.myapplication;

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.BitmapShader;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.Rect;
import android.support.annotation.Nullable;
import android.util.AttributeSet;
import android.view.View;
import android.graphics.Shader.TileMode;
/**
 * Created by Administrator on 2020/3/14.
 */

public class MyView extends View {

    Bitmap bitmap=null;
    Paint paint=null;
    public MyView(Context context) {
        super(context);
    }
    private int width;
    private int height;

    public MyView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);

          bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.bg);
          paint=new Paint();
        width = bitmap.getWidth();
        height = bitmap.getHeight();
    }
    private BitmapShader bitmapShader;
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        /**
         * 图片平铺模式：
         * TileMode.CLAMP: 图片已经方向，拉伸最后一个像素去平铺空余地方
         * TileMode.MIRROR： 通过翻转铺满剩下地方
         *  TileMode.REPEAT: 不断重复图片填充画面
         */
        bitmapShader = new BitmapShader(bitmap, TileMode.CLAMP, TileMode.CLAMP);
        paint.setShader(bitmapShader);
      //  canvas.drawRect(new Rect(0,0,400,400),paint);
        // 这里必须要宽、高小的值来计算半径
        if(height>width){
            canvas.drawCircle(width/2,width/2, width/2,paint);
        }else{
            canvas.drawCircle(height/2,height/2, height/2,paint);
        }
        // 绘制在图层去，不会影响空间区域
       // canvas.drawBitmap(bitmap,0,0,paint);
    }
}

效果图：

  3.LinearGradient： 线性渐变

基本使用1：

 <com.denganzhi.myapplication.LinnearView
        android:id="@+id/myview"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    </com.denganzhi.myapplication.LinnearView>

 Java代码使用：

package com.denganzhi.myapplication;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.LinearGradient;
import android.graphics.Paint;
import android.graphics.Rect;
import android.graphics.Shader;
import android.support.annotation.Nullable;
import android.util.AttributeSet;
import android.view.View;

/**
 * Created by Administrator on 2020/3/14.
 */

public class LinnearView extends View  {
    Paint paint=null;
    public LinnearView(Context context) {
        super(context);
    }

    public LinnearView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        paint = new Paint();
    }

    int[] colors={Color.RED,Color.BLACK,Color.YELLOW};
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);


        /**
         *
         * float x0, float y0, float x1, float y1, @NonNull @ColorInt int colors[],
         @Nullable float positions[], @NonNull TileMode tile)

         x0 y0  起始点
         x1 y1 终点
         colors:过滤颜色
         postion[]: 0-1的过渡比例，每一个颜色
         0   平均渐变
         title:  图片平铺模式：
         */
         LinearGradient linearGradient=new LinearGradient(0,100.0f,200.0f,100.0f,colors,null, Shader.TileMode.CLAMP);
         paint.setShader(linearGradient);
         canvas.drawRect(new Rect(0,0,400,200),paint);
    }
}

 效果：

   4.实现文字： 使用线性渐变实现文字渐变功能

实现原理：在歌词上2个字节的位置设置渐变,文字与渐变进行融合,使用setTranslate 改变渐变位置

4. 1xml代码布局：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:background="#000"
    tools:context="com.denganzhi.myapplication.MainActivity">

 <com.denganzhi.myapplication.MyLinearView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="红塔山上的猫和爱新觉罗·李"
        android:textSize="20sp"
        android:textColor="#f00"
        >
    </com.denganzhi.myapplication.MyLinearView>

</LinearLayout>

 4.2. Java 代码布局：

package com.denganzhi.myapplication;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.LinearGradient;
import android.graphics.Matrix;
import android.graphics.Paint;
import android.graphics.Rect;
import android.graphics.Shader;
import android.support.annotation.Nullable;
import android.util.AttributeSet;
import android.util.Log;
import android.view.View;
import android.widget.TextView;

/**
 * Created by Administrator on 2020/3/14.
 */

public class MyLinearView extends TextView {

    Paint paint=null;
    LinearGradient linearGradient=null;
    Matrix matrix=null;
    float cureentgriendSize=0 ;  //等于2个文字大小
    public MyLinearView(Context context) {
        super(context);
    }

    public MyLinearView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);

    }
    // 试图显示的时候，调用一次
    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        // 这里必须要getPaint
        paint = getPaint();
        //GradientSize=两个文字的大小
        String text = getText().toString();
        float textWidth = paint.measureText(text);
        int GradientSize =(int) (3*textWidth/text.length());
        // 开始位置向左偏移3个位置渐变
        linearGradient = new LinearGradient(-GradientSize, 0, 0, 0, new int[]{0x22ffffff,0xffffffff,0x22ffffff}, new float[]{0,0.5f,1}, Shader.TileMode.CLAMP);//边缘融合
        paint.setShader(linearGradient);
        matrix = new Matrix();
    //    postInvalidate();
    }
    private float translateX;
    private float deltaX = 20;

    @Override
    protected void onDraw(Canvas canvas) {

        super.onDraw(canvas);
        float textWidth = getPaint().measureText(getText().toString());
        translateX += deltaX;  //20
        if(translateX > textWidth + 1|| translateX < 1){
            deltaX = -deltaX;
        }
//		matrix.setScale(sx, sy)
        // 设置 渲染切换
        matrix.setTranslate(translateX, 0);
        linearGradient.setLocalMatrix(matrix);

        postInvalidateDelayed(50);


    }
}

4.3. 显示效果图：