Paint设置过滤器更变图片整体颜色效果

还是老规矩，先看效果，因为个人感觉如果你写半天代码根据不知道自己最后要实现什么样的效果是一个非常痛苦的事情；

如果单说实现点击图片变色效果，有很多中实现方式；

最简单的就是准备两张图片，通过点击切换两张图片实现以上效果；

但是今天我们不适用这种方式，我们通过自定义一个ImageView,给Paint(画笔设置颜色过滤器来实现这个效果)；

 

整个小demo非常简单，一个MainActivity(上面是一个TextView,下面是自定义的ImageView)

还有一个工具类ScreenUtils(用来测量屏幕的宽高)这两个类就不给大家复制了，源码里面都有

下面我们来看一下自定的ImageView:

 

/**
 * Created by a on 2016/6/14.
 * 自定义的ImageView，
 */
public class ImageView extends View {

    private Paint mPaint;//画笔
    private Bitmap bitmap;//位图
    private int x;
    private int y;
    private boolean isClick;// 用来标识控件是否被点击过

    public ImageView(Context context) {
        this(context,null);
    }
    public ImageView(Context context, AttributeSet attrs) {
        this(context, attrs,0);
    }
    public ImageView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);

        //初始化画笔
        initPaint();
        //初始化资源
        initRes(context);

        //给自定义的ImageView设置点击事件
        setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {

                //判断是否被点击过
                if(isClick){
                    // 如果已经被点击了则点击时设置颜色过滤为空还原本色
                    mPaint.setColorFilter(null);//设置过滤为空，就是没有任何效果，和原图一样
                    isClick = false;

                }else {
                    // 如果未被点击则点击时设置颜色过滤后为黄色
                    mPaint.setColorFilter(new LightingColorFilter(0x1200ffff, 0x00000000));
                    isClick = true;
                }

                //重绘
                invalidate();

            }
        });

    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        /**
         * 绘制图片
         *
         * 第一个参数：图片对象
         * 第二个参数：偏移左边的位置
         * 第三个参数：偏移顶部的位置
         * 第四个参数：画笔
         */
        canvas.drawBitmap(bitmap,x,y,mPaint);
    }

    /**
     * 初始化资源
     * @param context
     */
    private void initRes(Context context) {
        // 获取位图
        bitmap = BitmapFactory.decodeResource(context.getResources(),R.drawable.qjl );
        /*
         * 计算位图绘制时左上角的坐标使其位于屏幕中心
         * 屏幕坐标x轴向左偏移位图一半的宽度
         * 屏幕坐标y轴向上偏移位图一半的高度
         */
        x = ScreenUtils.getScreenWidth(context)/2-bitmap.getWidth()/2;
        y = ScreenUtils.getScreenWidth(context)/2-bitmap.getHeight()/2;
    }

    /**
     * 初始化画笔
     */
    private void initPaint() {
        //创建画笔，设置抗锯齿，这是标准步骤，几乎创建过画笔紧接着就是抗锯齿
        mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
    }

}

 

当然点击变色的效果大家可以自由设置，相信稍微了解点自定义View的朋友们看以上代码都不会感觉很难，可以说是非常简单；

 

点击打开链接免费下载源码