手把手讲解-一个复杂动效的自定义绘制3，springmvc源码分析

最新推荐文章于 2024-06-12 15:23:36 发布

Java后端面试题

最新推荐文章于 2024-06-12 15:23:36 发布

阅读量174

点赞数

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

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

版权

程序员专栏收录该内容

14 篇文章 0 订阅

订阅专栏

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一共划过了整个涂层的百分之多少.

其实到了这里，我们已经实现了涂层刮刮卡的效果。
但是锦上添花，多加3个功能:

#####1)计算当前一共划过了百分之多少

            int w = getWidth();
            int h = getHeight();
            float totalPx = w * h;//总像素点个数
            int[] pxArr = new int[w * h];//用一个数组去缓存

            mCoatBitmap.getPixels(pxArr, 0, w, 0, 0, w, h);// 获得当前bitmap的像素点数组，把它注入到pxArr中

            int cleanedPx = 0;
            //宽高二维解析
            for (int col = 0; col < h; col++) {
                for (int row = 0; row < w; row++) {
                    if (pxArr[col * w + row] == 0) {//手指滑过之后，当前位置的像素点就会被置为0
                        cleanedPx++;//已经被清空的像素点个数
                    }
                }
            }

            float res = cleanedPx / totalPx;//计算一共滑过了百分之多少

前面解释过，bitmap就是一个每个像素点颜色独立的矩形区域，这里先将矩形区域定义好，然后获得每一个像素点，而手指划过之后的像素点的颜色，会置为0（这个和xfermode模式有关）,经过对比，就能计算出为0的像素点有多少个，和总的像素点个数相除，就能得出最终百分比。最后将百分比返回出去，提供一个回调给外界，就能得到文章开头的gif图效果。

#####2) 刮了一定的百分比就要自动显示全图：
定义Runnable 按照对比当前划过区域的百分比和显示全图的临界值，看情况决定是否刷新View

Runnable showAllRunnable = new Runnable() {
        @Override
        public void run() {
            //判定是否具备展示全图的条件：
            //条件为：当前滑过的面积是否超过了临界百分比，比如30%

            int w = getWidth();
            int h = getHeight();
            float totalPx = w * h;//总像素点个数
            int[] pxArr = new int[w * h];//用一个数组去缓存

            mCoatBitmap.getPixels(pxArr, 0, w, 0, 0, w, h);// 获得当前bitmap的像素点数组，把它注入到pxArr中

            int cleanedPx = 0;
            //宽高二维解析
            for (int col = 0; col < h; col++) {
                for (int row = 0; row < w; row++) {
                    if (pxArr[col * w + row] == 0) {//手指滑过之后，当前位置的像素点就会被置为0
                        cleanedPx++;//已经被清空的像素点个数
                    }
                }
            }

            float res = cleanedPx / totalPx;//计算一共滑过了百分之多少

            if (callback != null)
                callback.scratch(res);
            if (res > SHOW_ALL_PERCENT) {//临界值0.2
                ifShowAll = true;//保存状态，显示全图
                postInvalidate();//利用handler发送事件
            } else {
                ifShowAll = false;
            }

        }
    };

#####3) 增加涂层重置和显示原图的api

public void showAll() {
        ifShowAll = true;//保存状态，显示全图
        postInvalidate();
    }

    public void reset() {
        //重置mCoatBitmap，重置path，重置ifShowAll为false，然后刷新
        mCoatBitmap = createCoatBitmap(w, h);
        mCoatCanvas = new Canvas(mCoatBitmap);
        mPath.reset();
        ifShowAll = false;
        postInvalidate();
    }

Kafka实战笔记

关于这份笔记，为了不影响大家的阅读体验，我只能在文章中展示部分的章节内容和核心截图，如果你需要完整的pdf版本，戳这里即可免费领取。

Kafka入门
为什么选择Kafka
Karka的安装、管理和配置

Kafka的集群
第一个Kafka程序

afka的生产者

Kafka的消费者
深入理解Kafka
可靠的数据传递

Spring和Kalka的整合
Sprinboot和Kafka的整合
Kafka实战之削峰填谷
数据管道和流式处理(了解即可)

Kafka实战之削峰填谷

-1628625827033)]

Spring和Kalka的整合
Sprinboot和Kafka的整合
Kafka实战之削峰填谷
数据管道和流式处理(了解即可)

[外链图片转存中…(img-8BvZijzl-1628625827034)]

Kafka实战之削峰填谷

[外链图片转存中…(img-0cHYjcIa-1628625827035)]

Java后端面试题

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
手把手讲解-一个复杂动效的自定义绘制3，springmvc源码分析

Bitmap，中文翻译：位图; 百度百科上对Bitmap的描述说了很多官话，其实翻译成人话就是这样的：Bitmap,位图，点阵图。如果是一个1080x1920的位图,就是由横向1080个点乘以纵向1920 个像素点构成的一个矩形区域，每一个点都可以有独立的颜色（#AARRGGBB)对，他就是每一个像素点都可以独立配色的像素点矩形。那么为啥canvas的draw操作改变它的内容，其实也就是改变了某些像素点的颜色。从demo的试验中可以得出这个结论.但是源码内是如何进行的呢？开始探索源码咯:.
复制链接

扫一扫