自我绘制六

293 阅读4分钟

一前言

前几篇文章我们使用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对象

lefttop 是要把 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) ,参数里的 muladd 都是和颜色值格式相同的 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个步骤,就可以写出来这个自定义效果!这里不在贴源码,如果想看可以自行下载。

源码地址:github.com/XiFanYin/Cu…