渲染器
Shader.TileMode 三个类型
1.CLAMP
当填充区域大于填充物，会以填充物体最后一个像素水平或者垂直方向上的延申
2.REPEAT
以填充物水平和垂直方向上的复制平铺填充
3.MIRROR（镜像）
以填充物水平或者垂直方向上的翻转平铺填充
1.效果
如下图：分别是 1：线性 2：环形 3：扫描 4：位图 5：组合
0001.jpg
override fun draw(canvas: Canvas?) {
super.draw(canvas)
setShader(canvas)
}
fun setShader(canvas: Canvas?){
canvas?.drawLine(50F,50F,600F,50F,mPaint)
mPaint.setShader(SweepGradient(200F, 200F, Color.RED, Color.YELLOW)) //环形渲染器
canvas?.drawLine(50F,150F,600F,150F,mPaint)
}
2.线性渲染（LinearGradient）
fun LinearGradient(canvas: Canvas?) {
/**
* LinearGradient(float x0, float y0, float x1, float y1,int[] colors,float[] positions,TileMode tile)
* x0,y0 表示渲染的起点
* x1,y1 表示渲染的终点
* colors[]表示渲染颜色的集合
* positions[]对应颜色集合每个颜色从哪个位置渲染(按照百分比的 ositions[0...1])
* tile 端点范围之外的着色规则
*/
mPaint.setShader(LinearGradient(0F,0F,500F,500F, intArrayOf(Color.BLUE,Color.RED,Color.YELLOW),
floatArrayOf(0F,0.5F,1F),Shader.TileMode.CLAMP))
canvas?.drawRect(0F,0F,500F,500F,mPaint)
}
3.环形渲染（RadialGradient）
fun RadialGradient(canvas: Canvas?) {
/**
* 环形渲染
* RadialGradient(float centerX, float centerY, float radius,int[] colors,float[] positions,TileMode tile)
* centerX,centerY 表示渲染的中心
* radius 表示环形渲染半径
* colors[]表示渲染颜色的集合
* positions[]对应颜色集合每个颜色从哪个位置渲染(按照百分比的 ositions[0...1])
* tile 端点范围之外的着色规则
*/
mPaint.setShader(RadialGradient(250F,250F,250F, intArrayOf(Color.BLUE,Color.RED,Color.YELLOW),
floatArrayOf(0F,0.5F,1F),Shader.TileMode.MIRROR))
canvas?.drawRect(0F,0F,500F,500F,mPaint)
}
4.扫描渲染（SweepGradient）
fun SweepGradient(canvas: Canvas?) {
/*
*
* RadialGradient(float centerX, float centerY, float radius,int[] colors,float[] positions,TileMode tile)
* centerX,centerY 表示渲染的中心
* colors[]表示渲染颜色的集合
* positions[]对应颜色集合每个颜色从哪个位置渲染(按照百分比的 ositions[0...1])
* tile 端点范围之外的着色规则
*/
mPaint.setShader(
SweepGradient(
250F, 250F, intArrayOf(Color.BLUE, Color.RED, Color.YELLOW),
floatArrayOf(0F, 0.5F, 1F)
)
)
canvas?.drawRect(0F, 0F, 500F, 500F, mPaint)
}
4.位图渲染（BitmapShader）
fun BitmapShader(canvas: Canvas?) {
/*
* BitmapShader(@NonNull Bitmap bitmap, @NonNull TileMode tileX, @NonNull TileMode tileY)
* bitmap 渲染图片
* tileX 端点范围之外的着色规则
* tileY 端点范围之外的着色规则·
*/
mPaint.setShader(BitmapShader(mBitmap, Shader.TileMode.MIRROR, Shader.TileMode.MIRROR))
canvas?.drawRect(0F, 0F, 500F, 500F, mPaint)
}
5.组合渲染（ComposeShader）
ComposeShader 例如 LinearGradient+BitmapGradient
fun ComposeShader(canvas: Canvas?) {
/*
* ComposeShader(@NonNull Shader shaderA, @NonNull Shader shaderB, @NonNull PorterDuff.Mode mode)
* shaderA 渲染器A
* shaderB 渲染器B
* mode 渲染模式
*/
var mRadialGradient = RadialGradient(
250F, 250F, 250F, intArrayOf(Color.BLUE, Color.RED, Color.YELLOW),floatArrayOf(0F, 0.5F, 1F), Shader.TileMode.MIRROR )
var mBitmapShader = BitmapShader(mBitmap, Shader.TileMode.MIRROR, Shader.TileMode.MIRROR)
mPaint.setShader(ComposeShader(mBitmapShader, mRadialGradient, PorterDuff.Mode.LIGHTEN))
canvas?.drawRect(0F, 0F, 500F, 500F, mPaint)
}
示例代码
class ShaderExample:View {
constructor(context: Context?) : this(context,null)
constructor(context: Context?, attrs: AttributeSet?) : this(context, attrs,0)
constructor(context: Context?, attrs: AttributeSet?, defStyleAttr: Int) : super(
context,
attrs,
defStyleAttr
)
var mPaint = Paint()
lateinit var mBitmap: Bitmap
init {
mPaint.setARGB(255, 255, 0, 0)
mPaint.isAntiAlias = true //是否抗锯齿
mPaint.style = Paint.Style.FILL // 描边填充效果 1.STROKE 描边 2.FIll 填充 3.FILL_AND_STROKE 描边+填充
mPaint.strokeWidth = 50F // 描边宽度
mBitmap = BitmapFactory.decodeResource(context.resources, R.mipmap.img_01)
}
override fun draw(canvas: Canvas?) {
super.draw(canvas)
LinearGradient(canvas)
RadialGradient(canvas)
SweepGradient(canvas)
BitmapShader(canvas)
ComposeShader(canvas)
}
/**
* 1线性渲染
*/
fun LinearGradient(canvas: Canvas?) {
/*
* LinearGradient(float x0, float y0, float x1, float y1,int[] colors,float[] positions,TileMode tile)
* x0,y0 表示渲染的起点
* x1,y1 表示渲染的终点
* colors[]表示渲染颜色的集合
* positions[]对应颜色集合每个颜色从哪个位置渲染(按照百分比的 ositions[0...1])
* tile 端点范围之外的着色规则
*/
mPaint.setShader(
LinearGradient(
0F, 0F, 500F, 500F, intArrayOf(Color.BLUE, Color.RED, Color.YELLOW),
floatArrayOf(0F, 0.5F, 1F), Shader.TileMode.CLAMP
)
)
canvas?.drawRect(0F, 0F, 500F, 500F, mPaint)
}
/**
*2环形渲染
*/
fun RadialGradient(canvas: Canvas?) {
/*
*
* RadialGradient(float centerX, float centerY, float radius,int[] colors,float[] positions,TileMode tile)
* centerX,centerY 表示渲染的中心
* radius 表示环形渲染半径
* colors[]表示渲染颜色的集合
* positions[]对应颜色集合每个颜色从哪个位置渲染(按照百分比的 ositions[0...1])
* tile 端点范围之外的着色规则
*/
mPaint.setShader(
RadialGradient(
750F, 250F, 250F, intArrayOf(Color.BLUE, Color.RED, Color.YELLOW),
floatArrayOf(0F, 0.5F, 1F), Shader.TileMode.MIRROR
)
)
canvas?.drawRect(500F, 0F, 1000F, 500F, mPaint)
}
/**
* 3扫描渲染
*/
fun SweepGradient(canvas: Canvas?) {
/*
*
* RadialGradient(float centerX, float centerY, float radius,int[] colors,float[] positions,TileMode tile)
* centerX,centerY 表示渲染的中心
* colors[]表示渲染颜色的集合
* positions[]对应颜色集合每个颜色从哪个位置渲染(按照百分比的 ositions[0...1])
* tile 端点范围之外的着色规则
*/
mPaint.setShader(
SweepGradient(
250F, 750F, intArrayOf(Color.BLUE, Color.RED, Color.YELLOW),
floatArrayOf(0F, 0.5F, 1F)
)
)
canvas?.drawRect(0F, 500F, 500F, 1000F, mPaint)
}
/**
*4位图渲染
*/
fun BitmapShader(canvas: Canvas?) {
/*
* BitmapShader(@NonNull Bitmap bitmap, @NonNull TileMode tileX, @NonNull TileMode tileY)
* bitmap 渲染图片
* tileX 端点范围之外的着色规则
* tileY 端点范围之外的着色规则
*/
mPaint.setShader(BitmapShader(mBitmap, Shader.TileMode.MIRROR, Shader.TileMode.MIRROR))
canvas?.drawRect(500F, 500F, 1000F, 1000F, mPaint)
}
/**
*5组合渲染
*/
fun ComposeShader(canvas: Canvas?) {
/*
* ComposeShader(@NonNull Shader shaderA, @NonNull Shader shaderB, @NonNull PorterDuff.Mode mode)
* shaderA 渲染器A
* shaderB 渲染器B
* mode 渲染模式
*/
var mRadialGradient = RadialGradient(
250F, 1250F, 250F, intArrayOf(Color.BLUE, Color.RED, Color.YELLOW),floatArrayOf(0F, 0.5F, 1F), Shader.TileMode.MIRROR )
var mBitmapShader = BitmapShader(mBitmap, Shader.TileMode.MIRROR, Shader.TileMode.MIRROR)
mPaint.setShader(ComposeShader(mBitmapShader, mRadialGradient, PorterDuff.Mode.LIGHTEN))
canvas?.drawRect(0F, 1000F, 500F, 1500F, mPaint)
}
/**
* 渲染器 简洁版
*/
fun setShader(canvas: Canvas?) {
canvas?.drawLine(50F, 50F, 600F, 50F, mPaint)
mPaint.setShader(SweepGradient(200F, 200F, Color.RED, Color.YELLOW)) //渲染器
canvas?.drawLine(50F, 150F, 600F, 150F, mPaint)
}
}