手把手讲解-一个复杂动效的自定义绘制3(1)，2021春招面试

最新推荐文章于 2024-11-16 18:22:10 发布

Java后端面试题

最新推荐文章于 2024-11-16 18:22:10 发布

阅读量179

点赞数

分类专栏：程序员文章标签：后端面试 java

本文链接：https://blog.csdn.net/m0_60666209/article/details/119587524

版权

程序员专栏收录该内容

14 篇文章 0 订阅

订阅专栏

本人能力有限，如若发现描述不当之处，欢迎留言批评指正。

学到老活到老，路漫漫其修远兮。与众君共勉 !

#github地址：
[下载之后找到其中的 ScratchCardImageView] (https://github.com/18598925736/UiDrawTest)

#效果

#思路

上面的动态图，我们看到了一个妹纸图，然后是一个灰色的涂层，然后是通过光标去画的时候出现的空白区域.
然后，下面会显示出当前已经刮了百分之几.

OK, 那么，按照步骤我们一步一步来绘制：

###1. 妹纸图
我猜有人可能想直接从资源文件中构建出一个Bitmap然后draw上去，没错，我之前也是这么想的，但是后来，其实有更简单的办法，让自定义View直接 AppCompatImageView，然后onDraw里面直接super.onDraw(canvas)…, 不但省了Draw原图的过程，还省了测量的过程，一举两得。

public class ScratchCardImageView extends AppCompatImageView {
     //省略无关代码...
    @Override
    protected void onDraw(Canvas canvas) {
        //1 画原图
        super.onDraw(canvas);//这里不可以删掉。。因为画原始图片，就是这里画的
        //省略无关代码...
    }
}

然后:在布局里面直接使用它就好了:

<study.hank.com.draw001.custom.ScratchCardImageView
        android:id="@+id/scView"
        android:layout_width="300dp"
        android:layout_height="300dp"
        android:src="@drawable/girl" />

###2. 刮刮卡的灰色涂层
这个时候我们只能老老实实自己写Bitmap了。代码：

    /**
     * 构建一个灰色图层Bitmap
     * @param w
     * @param h
     * @return
     */
    private Bitmap createCoatBitmap(int w, int h) {
        Bitmap bitmap = Bitmap.createBitmap(w, h, Bitmap.Config.ARGB_4444);//构建一个指定宽高的bitmap
        Canvas canvas = new Canvas(bitmap);//新建一个画布
        Paint paint = new Paint();//新建画笔
        paint.setColor(cardColor);// 灰色
        paint.setAntiAlias(true);// 抗锯齿
        canvas.drawRect(0, 0, w, h, paint);//这个draw动作，会改变bitmap的内容
        return bitmap;
    }

在合适的地方，比如onMeasure中（因为测量，在绘制之前）调用createCoatBitmap()并且用全局变量保存它。

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);

        if (!inited) {//由于onMeasure有可能会执行两次，而我们没有必要去执行两次初始化绘制，所以加一层控制
            //让涂层 和  图片一样宽高
            w = getMeasuredWidth();
            h = getMeasuredHeight();
            mCoatBitmap = createCoatBitmap(w, h);
            mCoatCanvas = new Canvas(mCoatBitmap);//把bitmap的内容委托给canvas
            inited = true;
        }
    }

#####Tips：
这里有个细节：mCoatCanvas = new Canvas(mCoatBitmap);
这句话，利用一个全局的Canvas mCoatCanvas来接收封装了mCoatBitmap的new Canvas.
因为，mCoatCanvas的drawXXX操作可以影响Bitmap的实际内容.
这里就不得不提Bitmap到底是个神马玩意了:

Bitmap，中文翻译：位图; 百度百科上对Bitmap的描述说了很多官话，其实翻译成人话就是这样的：
Bitmap,位图，点阵图。如果是一个1080x1920的位图,就是由横向1080个点乘以纵向1920 个像素点构成的一个矩形区域，每一个点都可以有独立的颜色（#AARRGGBB)
对，他就是每一个像素点都可以独立配色的像素点矩形。

那么为啥canvas的draw操作改变它的内容，其实也就是改变了某些像素点的颜色。
从demo的试验中可以得出这个结论.
但是源码内是如何进行的呢？开始探索源码咯:
从mCoatCanvas = new Canvas(mCoatBitmap);开始

传入的bitmap被nInitRaster方法封装之后，赋值给了mNativeCanvasWrapper.

然后在真正去drawPath的时候，利用到了mNativeCanvasWrapper
熟悉C++的朋友应该知道 long类型的mNativeCanvasWrapper,只是一个对象指针,但是它能代表之前构造函数传入的Bitmap.
以此类推，看看其他的draw方法，无一例外，全都用到了mNativeCanvasWrapper

这下能解释得通了。

上面有了刮刮涂层的mCoatBitmap,那下一步就是画 刮刮涂层了:

@Override
    protected void onDraw(Canvas canvas) {
        //1 画原图
        super.onDraw(canvas);//这里不可以删掉。。因为画原始图片，就是这里画的
        //省略N行...
        //看来drawBitmap有另外的图层保存方式
        int layer = canvas.saveLayer(0, 0, getWidth(), getHeight(), mPaint, Canvas.ALL_SAVE_FLAG);//保存当前层

        // 2 画涂层
        canvas.drawBitmap(mCoatBitmap, 0, 0, mPaint);//绘制位图只需要 l和t两个参数，已这个为左上角起点开始绘制，可能会越界

       //省略N行...

        canvas.restoreToCount(layer);// 回到指定图层
    }

#####TIPS:
这里又有一个细节, canvas.saveLayer和 canvas.restoreToCount,从命名可以知道是 保存 和 恢复的意思:
他们的作用是，保存图层以及恢复到指定图层。由于我们这里使用了多层绘图（一层原图，一层刮涂层），而且绘制多次执行，所以必须绘制一次之后还原。具体关于save和restore，本文篇幅有限，就不详述了，可以参照 https://www.jianshu.com/p/e90accd0967f 说的很详细。

###3.光标划过之后出现的透明区域
要根据滑动事件来绘制图形，自然离不开 onTouchEvent的重写：

看了下面的代码，应该会发现，在构建path的时候，我用了quadTo 画了二阶贝塞尔曲线，原本我想的是直接用lineTo算了，后来发现，确实有点丑，而用贝塞尔曲线，好看的多。这里没有什么技术细节，纯粹是美观原因。

    private Path mPath;//要接收手指滑过的地方，要用Path保存
    /**
     * 监控手势，改变mPath
     *
     * @param e
     * @return
     */
    @Override
    public boolean onTouchEvent(MotionEvent e) {
         //...省略无关代码
        switch (e.getAction()) {
            case MotionEvent.ACTION_DOWN:
                lastX = e.getX();
                lastY = e.getY();
                mPath.moveTo(lastX, lastY);
                break;
            case MotionEvent.ACTION_MOVE: //?!!? MMP，为什么你收不到MOVE事件，只能认为是被拦截了
                // 手指移动，划线
                float endX = (lastX + e.getX()) / 2;
                float endY = (lastY + e.getY()) / 2;
                mPath.quadTo(lastX, lastY, endX, endY);
                lastX = endX;
                lastY = endY;
                break;
            case MotionEvent.ACTION_UP:
            case MotionEvent.ACTION_CANCEL:
                break;
            default:
                break;
        }
        //...省略无关代码
        return super.onTouchEvent(e);
        //  这里有个疑问.为什么这里不是true，我就收不到move事件，是不是ImageView特有的
        //  MMP,原来是clickable的问题。 我在xml里面加了
    }

有了Path，那么就要drawPath:

@Override
    protected void onDraw(Canvas canvas) {
        //1 画原图
        super.onDraw(canvas);//这里不可以删掉。。因为画原始图片，就是这里画的

       //省略无关代码...

        //看来drawBitmap有另外的图层保存方式
        int layer = canvas.saveLayer(0, 0, getWidth(), getHeight(), mPaint, Canvas.ALL_SAVE_FLAG);//保存当前图层
        // 2 画涂层
        canvas.drawBitmap(mCoatBitmap, 0, 0, mPaint);//绘制位图只需要 l和t两个参数，已这个为左上角起点开始绘制，可能会越界
        // 3 画path
        mPaint.setXfermode(xfermode);//设置模式
        canvas.drawPath(mPath, mPaint);//再去画
        //  记得要把mCoatBitmap的状态保存一下
        mCoatCanvas.drawPath(mPath, mPaint);
        //记得清掉mode。。不然下一次 onDraw 会出事
        mPaint.setXfermode(null);
        canvas.restoreToCount(layer);// 回到指定图层
    }

#####TIPS
1、drawPath，这里将画笔设置了Xfermode模式，此模式能够决定绘制的内容和原内容的关系，不同的模式决定在绘制之后保留不同的部分，
这里使用的是xfermode = new PorterDuffXfermode(PorterDuff.Mode.DST_OUT); 它会保留原内容和新绘制的内容交集之外的部分。（Xfermode的16种模式，请参考其他博客，此文不作详细描述）
2、绘制完了之后，记得将mPaint的xfermode设置为null，因为绘制会多次执行，画笔必须还原状态.
3、记得给之前涂层委托者mCoatCanvas 也绘制一次，这是为了记录当前path一共划过了整个涂层的百分之多少.