一前言
前几篇文章我们使用Paint类API有:
Paint.setStyle(Style style)设置绘制模式(空心实现)Paint.setColor(int color)设置颜色(设置画笔颜色)Paint.setStrokeWidth(float width)设置线条宽度Paint.setTextSize(float textSize)设置文字大小Paint.setAntiAlias(boolean aa)设置抗锯齿开关- Paint.isFakeBoldText = true 设置字体加粗
- arc_Paint.strokeCap 设置线的模式
且前边自定义View中每个元素都是纯色,每个元素都有一个画笔。但是在实际开发中遇到酷炫效果,纯色就满足不了需求!这个时候我们需要更加深入的了解Paint类中其他API
二绘制图片
想要绘制一个图片到自定义View中,需要使用系统给我们提供的方法:
drawBitmap(Bitmap bitmap, float left, float top, Paint paint) 画 Bitmap
Bitmap 是需要绘制的图片bitmap对象
left 和 top 是要把 bitmap 绘制到的位置坐标
paint是画笔
代码类似这样:
constructor(context: Context?, attrs: AttributeSet?) : super(context, attrs) {
//获取原始图片的bitmap对象
mBitmap = BitmapFactory.decodeResource(resources, R.drawable.kkkl)
//创建画笔
BitmapPaint = Paint(Paint.ANTI_ALIAS_FLAG)
}
override fun onDraw(canvas: Canvas) {
//绘制图片
canvas.drawBitmap(mBitmap,0F,0F,BitmapPaint)
}效果图:
这里的画笔没有设置颜色,而是直接创建一个画笔,然后调用绘制图片,图片就绘制成彩色的了。这是因为图片的颜色由Bitmap上的像素颜色确定的,所以绘制出来的图片是彩色的
假如我们有需求,要绘制图片颜色为黑白色,或者只要图片的阴影效果,我们该怎么绘制呢?
2.1绘制阴影效果
绘制引用效果无非是吧所有的颜色都设置一个统一的颜色,那么从视觉上就是一个阴影效果,并且google给我们提供了过滤颜色方案:
LightingColorFilter 的构造方法是 LightingColorFilter(int mul, int add) ,参数里的 mul 和 add 都是和颜色值格式相同的 int 值,其中 mul 用来和目标像素相乘,add 用来和目标像素相加:
如果我们想要绘制阴影效果,我们可以吧所有颜色都设置成一个颜色,添加一行代码:
BitmapPaint.colorFilter = LightingColorFilter(0x000000, 0xeeeeee)这里的每个像素:
R = 00*R +ee
G = 00*G +ee
B = 00*B+ee
得到的效果如下:
这种过滤颜色的方式虽然可以实现,但是如果需求中设置的粉红色的阴影,计算起来就费劲了,google还给我们提供了另外一个类来满足这样的需求:
PorterDuffColorFilter(int color, PorterDuff.Mode mode)
color是制动颜色的值,
mode是设定的重叠模式:关于它的更多可以去查官方文档。这里我们因为要阴影,所以设置成PorterDuff.Mode.SRC_IN
修应该上边一行代码:
BitmapPaint.colorFilter = PorterDuffColorFilter(resources.getColor(R.color.colorAccent),PorterDuff.Mode.SRC_IN)效果图变成如下:
2.2绘制黑白颜色
上边的阴影效果,但是我们需要把他变成黑白色怎么办呢?就好像黑白电影一样的效果:
需要用到另外一个颜色过滤:ColorMatrixColorFilter
把上边设置颜色过滤变成如下代码:
BitmapPaint = Paint(Paint.ANTI_ALIAS_FLAG)
//创建矩阵
val colorMatrix = ColorMatrix()
//设置饱和度
colorMatrix.setSaturation(0F)
//设置颜色过滤
BitmapPaint.colorFilter = ColorMatrixColorFilter(colorMatrix)绘制效果如下:
三图片设置成画笔颜色
假如我们有一个需求,要求这个一个图片绘制一半的效果,这个时候我们怎么办?这能绘制嘛?
能!!!!
这就需要我们把图片设置成画笔颜色,然后绘制什么样子的路径,就出来响应的图片
其实很简单:只需要设置图片为画笔颜色,然后用这个画笔去画图形即可
//创建绘制矩形的画笔
paint = Paint(Paint.ANTI_ALIAS_FLAG)
//把图片设置成画笔颜色
paint.shader = BitmapShader(mBitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP)然后绘制
canvas.drawRect(Rect(20,100,mBitmap.width,mBitmap.height),paint)四 写一个练习的Demo,效果如下:
分析:需要绘制两个元素
- 一个是图片阴影区域的元素
绘制阴影区域我们可以通过给绘制图片画笔添加颜色过滤器,来改变成灰色
- 一个是贝塞尔曲线画笔颜色是该图片
把前边计算的贝赛尔曲线的坐标代码复制过来,直接给画笔颜色改成bitmap着色即可
按照之前总结的5个步骤,就可以写出来这个自定义效果!这里不在贴源码,如果想看可以自行下载。