Android高级渲染,画笔渲染通过paint.setShader
短信预约 -IT技能 免费直播动态提醒
1. 基础了解：
作者：小置同学
Android高级渲染,图层渲染
渲染：Shader
BitmapShader 图形渲染
LinearGradient 线性渲染
RadialGradient 环形渲染
SweepGradient 梯度渲染(扫描渲染)
ComposeShader 组合渲染
paint.setShader(bitmapShader); 效果展示,设置画笔渲染，画笔在图层上渲染，图片未摆满控件，摆放模式
1.xml布局：
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;
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);
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.效果图：
原理：paint.setShader把图片绘制在图层中，然后在用canvas在上面绘制一个圆
xml布局：
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;
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);
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);
}
}
效果图：
基本使用1：
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;
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);
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);
}
}
效果：
实现原理：在歌词上2个字节的位置设置渐变,文字与渐变进行融合,使用setTranslate 改变渐变位置
4. 1xml代码布局：
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;
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. 显示效果图：
作者：小置同学
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
