Android Paint 抗锯齿画线模糊

Android Paint 抗锯齿画线模糊 背景

Android 开发过程中, 或多或少会遇到需要使用自定义控件的情况, 而Paint作为画笔, 在整个开发过程中有着至关重要的地位, 用好它, 能让自定义控件展示出你期望的效果, 用不好… 或许会抱怨, 这平台/这工具/这类怎么设计得如此难用.

就如同本文将要阐述的问题, 希望能给遇到相似问题的朋友一点帮助, 若无碰到此类问题, 请自行略过.

问题

先看一张效果图 (图1):

两个网图, 同样设置的笔画宽度为1 setStrokeWidth(1), 左边的显示的大小是正常的, 右边则变成了2. 颜色也淡了.

下面这张图看起来会很明显,(一个方格为一个PIXEL) (图2):

而程序设计时, 所期望的效果是: (图3):

WHY

大概也猜到了, 这可能跟设置了抗锯齿有关, 没错, 确实的这样子

        Paint paint;
        Paint paintAnti;
        @Override
        protected void onSizeChanged(int w, int h, int oldw, int oldh) {
            super.onSizeChanged(w, h, oldw, oldh);
            //无抗锯齿
            paint = createPaint(false, Color.GREEN);
            //设置了抗锯齿
            paintAnti = createPaint(true, Color.RED);
        }
        Paint createPaint(boolean anti, int color){
            Paint paint = new Paint(anti ? Paint.ANTI_ALIAS_FLAG : 0);
            paint.setColor(color);
            paint.setStyle(Paint.Style.STROKE);
            //设置同样的宽度.
            paint.setStrokeWidth(1);
            return paint;
        }
    

创建画笔的唯一区别就是设置了Paint.ANTI_ALIAS_FLAG, 那么这个问题其实很好解决, 把抗锯齿关了就可以了.

确实是这样.

---

继续

同样上面的红网模糊的代码, 加入一个功能, 通过触摸更新红网的位置,

		//添加直线.
        void addLine(Path p, float fx, float fy, float tx, float ty){
            p.moveTo(fx + startX, fy + startY);
            p.lineTo(tx + startX, ty + startY);
        }
		//更新Path.
        void update(){
            pathAnti.reset();
            float left = 60;
            float right = 110;
            float top = 0;
            float bottom = 0;
            for(int i = 1; i < 10; i ++) {
                top = bottom = i * interval;
                addLine(pathAnti, left, top, right, bottom);
            }
            top = 0;
            bottom = 50;
            for(int i = 1; i < 10; i ++) {
                left = right = 60 + i * interval;
                addLine(pathAnti, left, top , right, bottom);
            }
        }

        float startX, startY;
        @Override
        public boolean onTouchEvent(MotionEvent event) {
            startX = event.getX()/30f;
            startY = event.getY()/30f;
            update();
            postInvalidate();
            return true;
        }

通过不停的触摸不同的位置并观察红网的效果, 发现一个现象,
当startX/startY的值, 去掉整数后, 剩下的小数值, 越接近0.5, 则线越实, 越接近期望的效果.

最接近期望效果 图4

于是, addLine稍微修改下:

        void addLine(Path p, float fx, float fy, float tx, float ty){
        	//取整, 再加上0.5, 得到的结果永远是 x.5;
            fx = (int)(fx + startX) + 0.5f;
            tx = (int)(tx + startX) + 0.5f;
            fy = (int)(fy + startY) + 0.5f;
            ty = (int)(ty + startY) + 0.5f;
            p.moveTo(fx, fy);
            p.lineTo(tx, ty);
        }

不管如何更新坐标, 显示的效果都如下图: 图5

			DashPathEffect dpe = new DashPathEffect(new float[]{3, 4}, 0);
            paint.setPathEffect(dpe);
            paintAnti.setPathEffect(dpe);

画个虚线 图6

最后

有点遗憾问题并不能够完美解决. 要能够彻底弄清楚是何原理, 估计得花不少精力去研究系统源码, 暂时没这时间精力, 只能听之任之, 坐等精于此道的先行者指点谜津. 共勉!