美文网首页
自定义View-Paint和ColorFilter 、MaskF

自定义View-Paint和ColorFilter 、MaskF

作者: _周小二 | 来源:发表于2019-03-11 18:26 被阅读0次
    
    private void intView(Context context) {
    
            mContext = context;
            mPaint = new Paint();
            mBitmap = BitmapFactory.decodeResource(mContext.getResources(), R.drawable.bg_bee_animation03);
            initPaint ();
        }
    
    @Override
        protected void onSizeChanged(int w, int h, int oldw, int oldh) {
            super.onSizeChanged(w, h, oldw, oldh);
            mViewWidth = w;
            mViewHeight = h;
    
        }
    
        @Override
        protected void onDraw(Canvas canvas) {
            super.onDraw(canvas);
    
            canvas.drawBitmap(mBitmap, mViewWidth / 2f - mBitmap.getWidth() / 2, mViewHeight / 2f - mBitmap.getHeight() / 2, mPaint);
    
    
        }
    
        /**
         * 初始化 画笔
         */
        private void initPaint () {
            // 实例化画笔并打开抗锯齿
            //在绘制的时候由于是一个一个小像素点绘制拼接成的 所以绘制的图会有小的锯齿(特别是曲线) 故此 矩形的就不用设置了
            mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
    
            //设置画笔样式为描边
            //1.Paint.Style.STROKE:描边
            //2.Paint.Style.FILL_AND_STROKE:描边并填充
            //3.Paint.Style.FILL:填充
            mPaint.setStyle(Paint.Style.STROKE);
            //设置画笔颜色为红色
            mPaint.setColor(Color.RED);
            //设置描边的粗细,单位:像素px
            //当setStrokeWidth(0)的时候描边宽度并不为0而是只占一个像素
            mPaint.setStrokeWidth(10);
    
        }
    

    得到结果

    图片.png

    设置ColorFilter3个子类

    1, ColorMatrixFilter

        /**
         * 设置图片矩阵
         * 改变的是每个像素点的颜色
         * 在initPaint()下面添加这个函数
         */
        private void setColorMatrixFilter() {
            ColorMatrix colorMatrix = new ColorMatrix(new float[]{
                    1.5F, 1.5F, 1.5F, 0, -1,
                    1.5F, 1.5F, 1.5F, 0, -1,
                    1.5F, 1.5F, 1.5F, 0, -1,
                    0, 0, 0, 1, 0,
            });
            mPaint.setColorFilter(new ColorMatrixColorFilter(colorMatrix));
    
        }
    
    图片.png

    2 ,LightingColorFilter 顾名思义光照颜色过滤

        @Override
        public boolean onTouchEvent(MotionEvent event) {
            setLightingColorFilter(event);
            return super.onTouchEvent(event);
        }
        /**
         * 光照颜色过滤
         * @param event
         */
        private void setLightingColorFilter (MotionEvent event) {
            switch (event.getAction()) {
                case MotionEvent.ACTION_DOWN:
                    //将 mul -->变成add(颜色)
                    mPaint.setColorFilter(new LightingColorFilter(0xFFFFFFFF, 0X00FFFF00));
                    Log.e(TAG, "onTouchEvent: + ACTION_DOWN");
                    invalidate();
                    break;
                case MotionEvent.ACTION_UP:
                    mPaint.setColorFilter(null);
                    Log.e(TAG, "onTouchEvent: ACTION_UP"  );
                    invalidate();
                    break;
            }
        }
    

    效果
    正常效果


    图片.png

    按下效果


    图片.png

    可以看到都变成黄色了

    3 PorterDuffColorFilter 不仅可以过滤颜色还可以设置模式

        @Override
        public boolean onTouchEvent(MotionEvent event) {
            setPorterDuffColorFilter(event);
            return super.onTouchEvent(event);
        }
    
    
        private void setPorterDuffColorFilter (MotionEvent event) {
    
            switch (event.getAction()) {
                case MotionEvent.ACTION_DOWN:
                    //一个是16进制表示的颜色值 另一个是PorterDuff内部类Mode中的一个常量值,这个值表示混合模式。
                    mPaint.setColorFilter(new PorterDuffColorFilter(Color.YELLOW, PorterDuff.Mode.DARKEN));
                    Log.e(TAG, "onTouchEvent: + ACTION_DOWN");
                    invalidate();
                    break;
                case MotionEvent.ACTION_UP:
                    mPaint.setColorFilter(null);
                    Log.e(TAG, "onTouchEvent: ACTION_UP"  );
                    invalidate();
                    break;
            }
    
        }
    

    正常效果


    图片.png

    点击效果


    图片.png
       mPaint.setColorFilter(new PorterDuffColorFilter(Color.YELLOW, PorterDuff.Mode.XOR));
    
    
    图片.png

    和这个同理的还有一种
    setXfermode设置模式方法 (图像混合模式)这个就自行了解

    关于 图像的背景阴影设置 在pain中可以通过 setMaskFilter来设置

    
        /**
         * 初始化 画笔
         */
        private void initPaint () {
            // 实例化画笔并打开抗锯齿
            //在绘制的时候由于是一个一个小像素点绘制拼接成的 所以绘制的图会有小的锯齿(特别是曲线) 故此 矩形的就不用设置了
            mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
    
            //设置画笔样式为描边
            //1.Paint.Style.STROKE:描边
            //2.Paint.Style.FILL_AND_STROKE:描边并填充
            //3.Paint.Style.FILL:填充
            mPaint.setStyle(Paint.Style.FILL);
            //设置画笔颜色为红色
            mPaint.setColor(Color.RED);
            //设置描边的粗细,单位:像素px
            //当setStrokeWidth(0)的时候描边宽度并不为0而是只占一个像素
            mPaint.setStrokeWidth(10);
    //        setColorFilter ();
    
            //添加
            setLayerType(LAYER_TYPE_SOFTWARE, null);
            mPaint.setMaskFilter(new BlurMaskFilter(20,BlurMaskFilter.Blur.OUTER));
        }
    

    结果


    图片.png

    这个new BlurMaskFilter(20,BlurMaskFilter.Blur.OUTER) 中的 20 是设置阴影大小 后者是设置模式共有
    SOLID,NORMAL,OUTER和INNER,NORMAL这4种
    用这个BlurMaskFilter类设置自己绘制的图还是很方便的 那么我们用来绘制图片的阴影就不是很方便了
    比如


    图片.png
    这是原图 图片.png

    换一个图试一试


    图片.png

    其实效果也不好
    那么我们怎么实现图片效果呢

        /**
         * 初始化 画笔
         */
        private void initPaint () {
            // 实例化画笔并打开抗锯齿
            //在绘制的时候由于是一个一个小像素点绘制拼接成的 所以绘制的图会有小的锯齿(特别是曲线) 故此 矩形的就不用设置了
            mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
    
            //设置画笔样式为描边
            //1.Paint.Style.STROKE:描边
            //2.Paint.Style.FILL_AND_STROKE:描边并填充
            //3.Paint.Style.FILL:填充
            mPaint.setStyle(Paint.Style.FILL);
            //设置画笔颜色为红色
            mPaint.setColor(Color.RED);
            //设置描边的粗细,单位:像素px
            //当setStrokeWidth(0)的时候描边宽度并不为0而是只占一个像素
            mPaint.setStrokeWidth(10);
    //        setColorFilter ();
    
            //添加
            setLayerType(LAYER_TYPE_SOFTWARE, null);
            mPaint.setMaskFilter(new BlurMaskFilter(50,BlurMaskFilter.Blur.NORMAL));
        }
        @Override
        protected void onSizeChanged(int w, int h, int oldw, int oldh) {
            super.onSizeChanged(w, h, oldw, oldh);
            mViewWidth = w;
            mViewHeight = h;
    
        }
    
        @Override
        protected void onDraw(Canvas canvas) {
            super.onDraw(canvas);
            canvas.drawColor(Color.YELLOW);
    
            //生成只提取了原图的alpha通道的新图,也就是说新的bitmap只有alpha值,rgb值为0。
            // 这个函数的作用是获取原图的轮廓,然后可以填充rgb值。因此可以实现阴影,影子,光晕等效果。
            Bitmap shadowBitmap = mBitmap.extractAlpha();
            canvas.drawBitmap(shadowBitmap,mViewWidth / 2f - mBitmap.getWidth() / 2, mViewHeight / 2f - mBitmap.getHeight() / 2, mPaint);
            canvas.drawBitmap(mBitmap, mViewWidth / 2f - mBitmap.getWidth() / 2, mViewHeight / 2f - mBitmap.getHeight() / 2, null);
        }
    }
    
    

    效果


    图片.png

    相关文章

      网友评论

          本文标题:自定义View-Paint和ColorFilter 、MaskF

          本文链接:https://www.haomeiwen.com/subject/udjvpqtx.html