android 自定义控件实现截图框功能

最新推荐文章于 2018-01-04 17:14:24 发布
最新推荐文章于 2018-01-04 17:14:24 发布
阅读量3k 收藏 1
点赞数 1
分类专栏： 实践 文章标签： android 截图
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/z_arze/article/details/49542323
版权

     毕业3个月了吧， 自己的第一篇博客，记录自己学到的知识，我话比较少，要是写得不好请见谅。

    在之前接触图片美化的知识，有加边框，贴纸，滤镜，截图等功能，这里介绍图片的截图，这个功能挺简单的，主要是截图框效果的实现。看下效果图：

 


   实现思路重写控件的onDraw函数 ，在画布上进行绘制想要的效果，这里需要绘制的是两个部分一个是截图框外的的黑色半透明部分，一个是截图框部分。这里的截图框可以用一个Rect类来处理，首先目标是获取截图框外的部分，很简单，通过画布的clipRect方法，获取画布与rect的交集的补集,截图框部分同理，具体怎么获取看下面代码；然后就是处理rect的数值变换，再通过重绘达到移动 ，放大，缩小的效果，下面是代码：

        

package com.example.arze.cutview;

import android.app.Activity;
import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.DashPathEffect;
import android.graphics.Paint;
import android.graphics.PathEffect;
import android.graphics.RectF;
import android.graphics.Region;
import android.graphics.drawable.BitmapDrawable;
import android.graphics.drawable.Drawable;
import android.util.AttributeSet;
import android.util.DisplayMetrics;
import android.view.MotionEvent;
import android.widget.ImageView;

/**
 * Created by arze on 2015/11/1.
 */
public class CutImageView extends ImageView {
    /**
     * 图片的大小
     */
    private int mBitmapWidth;
    private int mBitmapHeight;

    /**
     * 控件的大小
     *
     * @param context
     */
    private int mWidth;
    private int mHeight;

    /**
     * 图片在控件上的放大倍数
     */
    private double mScaleX;
    private double mScaleY;
    /**
     * 用来处理截图框的变换
     */
    private RectF mFloatRect;
    /**
     * 截图框的初始数值
     */
    private RectF mDefaultRect;
    /**
     * 截图框外部的默认颜色
     */
    private final int mDefaultColor = Color.parseColor("#a0000000");
    /**
     * 点击和移动的点
     */
    private float mTouchX;
    private float mTouchY;
    private float mMoveX;
    private float mMoveY;
    /**
     * 一些常量
     */
    private static final int TOPLEFT = 0x0001;
    private static final int TOPRIGHT = 0x0002;
    private static final int BOTTOMLEFT = 0x0003;
    private static final int BOTTOMRIGHT = 0x0004;

    private static final int BOTHSIDE = 0x0005;
    //  private static final int ONESIDE = 0x0006;
    private static final int MOVE = 0x0006;

    /**
     * 判断截图框的改变方式是移动还是缩放
     */
    private int mChangeType;
    /**
     * 判断点击的四个角
     */
    private int mTouch;
    /**
     * xml属性
     */
    private int mFloatColor;


    public CutImageView(Context context) {
        super(context);
        init(context, null, 0);
    }

    public CutImageView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init(context, attrs, 0);
    }

    public CutImageView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init(context, attrs, defStyleAttr);
    }

    private void init(Context context, AttributeSet attrs, int defStyleAttr) {
        TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.CutView);
        if (null != typedArray) {
            mFloatColor = typedArray.getColor(R.styleable.CutView_floatColor, mDefaultColor);
            typedArray.recycle();
        }
    }

    public void setImageBitmap(Bitmap bm) {
        super.setImageBitmap(bm);
        setLayerType(LAYER_TYPE_SOFTWARE, null);
        mBitmapWidth = bm.getWidth();
        mBitmapHeight = bm.getHeight();
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        // 计算控件的大小就不用说了
        int widthMode = MeasureSpec.getMode(widthMeasureSpec);
        int heightMode = MeasureSpec.getMode(heightMeasureSpec);
        if (widthMode == MeasureSpec.EXACTLY && heightMode == MeasureSpec.EXACTLY) {
            mWidth = MeasureSpec.getSize(widthMeasureSpec);
            mHeight = MeasureSpec.getSize(heightMeasureSpec);
        } else {
            setMeasuredDimension(widthMeasureSpec, heightMeasureSpec);
            mWidth = getMeasuredWidth();
            mHeight = getMeasuredHeight();
        }
        if (0 != mBitmapWidth && 0 != mWidth) {
            setScale();
        }
    }

    /**
     * 计算bitmap在控件上的放大倍数目前只写了FIT_CENTER，
     * 其它的可以自己写，不知有没有其它直接的方法获取
     */
    private void setScale() {
        if (ScaleType.FIT_CENTER == getScaleType()) {
            double widthScale = (double) mWidth / (double) mBitmapWidth;
            double heightScale = (double) mHeight / (double) mBitmapHeight;
            if (mBitmapWidth <= mWidth && mBitmapHeight <= mHeight) {
                mScaleX = mScaleY = (widthScale > heightScale ? heightScale : widthScale);
            } else if (mBitmapWidth <= mWidth && mBitmapHeight > mHeight) {
                mScaleX = mScaleY = heightScale;
            } else if (mBitmapWidth > mWidth && mBitmapHeight <= mHeight) {
                mScaleX = mScaleY = widthScale;
            } else if (mBitmapWidth > mWidth && mBitmapHeight > mHeight) {
                mScaleX = mScaleY = (widthScale > heightScale ? heightScale : widthScale);
            }
            setFloatRect();
        }
    }

    /**
     * 计算截图框的大小
     */
    private void setFloatRect() {
        float width = mBitmapWidth * (float) mScaleX;
        float height = mBitmapHeight * (float) mScaleY;
        float left = (mWidth - width) / 2;
        float top = (mHeight - height) / 2;
        float right = left + width;
        float bottom = top + height;
        mFloatRect = new RectF(left, top, right, bottom);
        mDefaultRect = new RectF(left, top, right, bottom);

    }


    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        if (null != mFloatRect) {
            Paint paint = new Paint();
            paint.setColor(mFloatColor);
            // 绘制截图框外部部分
            canvas.save();
            //Region.Op.XOR 是异并集，这里是获取截图框外部部分
            canvas.clipRect(mFloatRect, Region.Op.XOR);
            canvas.drawColor(mFloatColor);
            canvas.restore();
            canvas.save();
            //Region.Op.INTERSECT 是交集
            canvas.clipRect(mFloatRect, Region.Op.INTERSECT);
            // 绘制截图框部分
            drawFloatRect(canvas);
            canvas.restore();
        }
    }

    /**
     * 绘制截图框部分
     *
     * @param canvas
     */

    private void drawFloatRect(Canvas canvas) {
        Paint paint = new Paint();
        paint.setColor(Color.parseColor("#ffffffff"));
        paint.setStrokeWidth(15);
        // 外边框
        float[] points = {mFloatRect.left, mFloatRect.top, mFloatRect.right, mFloatRect.top,
                mFloatRect.right, mFloatRect.top, mFloatRect.right, mFloatRect.bottom,
                mFloatRect.right, mFloatRect.bottom, mFloatRect.left, mFloatRect.bottom,
                mFloatRect.left, mFloatRect.bottom, mFloatRect.left, mFloatRect.top};
        canvas.drawLines(points, paint);
        PathEffect effects = new DashPathEffect(new float[]{5, 5}, 1);
        paint.setPathEffect(effects);
        paint.setStrokeWidth(1);
        float vx = (mFloatRect.right - mFloatRect.left) / 3;
        float vy = (mFloatRect.bottom - mFloatRect.top) / 3;
        // 四条虚线，要画出虚线需要执行setLayerType(LAYER_TYPE_SOFTWARE, null);方法
        float[] dashPoints = {mFloatRect.left + vx, mFloatRect.top, mFloatRect.left + vx, mFloatRect.bottom,
                mFloatRect.left + 2 * vx, mFloatRect.top, mFloatRect.left + 2 * vx, mFloatRect.bottom,
                mFloatRect.left, mFloatRect.top + vy, mFloatRect.right, mFloatRect.top + vy,
                mFloatRect.left, mFloatRect.top + 2 * vy, mFloatRect.right, mFloatRect.top + 2 * vy,};
        canvas.drawLines(dashPoints, paint);
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                mTouchX = event.getX();
                mTouchY = event.getY();
                jugmentChangeType();
                break;
            case MotionEvent.ACTION_UP:
                mChangeType = 0;
                mTouch = 0;
                break;
            case MotionEvent.ACTION_MOVE:
                mMoveX = event.getX();
                mMoveY = event.getY();
                setFloatRectChange();
                mTouchX = mMoveX;
                mTouchY = mMoveY;
                break;
        }
        return true;
    }

    /**
     * 判断截图框的改变方式，若是缩放需要判断点击的是哪个角
     */
    private void jugmentChangeType() {
        RectF rectF1 = new RectF(mFloatRect.left + 50, mFloatRect.top, mFloatRect.right - 50, mFloatRect.bottom);
        RectF rectF2 = new RectF(mFloatRect.left, mFloatRect.top + 50, mFloatRect.right, mFloatRect.bottom - 50);
        if (rectF1.contains(mTouchX, mTouchY) || rectF2.contains(mTouchX, mTouchY)) {
            mChangeType = MOVE;
        } else {
            mChangeType = BOTHSIDE;
            RectF rectFLeftTop = new RectF(mFloatRect.left - 50, mFloatRect.top - 50, mFloatRect.left + 50, mFloatRect.top + 50);
            RectF rectFRightTop = new RectF(mFloatRect.right - 50, mFloatRect.top - 50, mFloatRect.right + 50, mFloatRect.top + 50);
            RectF rectFLeftBottom = new RectF(mFloatRect.left - 50, mFloatRect.bottom - 50, mFloatRect.left + 50, mFloatRect.bottom + 50);
            RectF rectFRightBottom = new RectF(mFloatRect.right - 50, mFloatRect.bottom - 50, mFloatRect.right + 50, mFloatRect.bottom + 50);
            if (rectFLeftTop.contains(mTouchX, mTouchY)) {
                mTouch = TOPLEFT;
            } else if (rectFRightTop.contains(mTouchX, mTouchY)) {
                mTouch = TOPRIGHT;
            } else if (rectFLeftBottom.contains(mTouchX, mTouchY)) {
                mTouch = BOTTOMLEFT;
            } else if (rectFRightBottom.contains(mTouchX, mTouchY)) {
                mTouch = BOTTOMRIGHT;
            }
        }
    }

    /**
     * 截图框的数值变换
     */
    private void setFloatRectChange() {
        if (mChangeType == MOVE) {
            float x = mMoveX - mTouchX;
            float y = mMoveY - mTouchY;
            if (mDefaultRect.left <= mFloatRect.left + x && mDefaultRect.right >= mFloatRect.right + x) {
                mFloatRect.left += x;
                mFloatRect.right += x;
            } else if (mDefaultRect.left > mFloatRect.left + x && mDefaultRect.right >= mFloatRect.right + x) {
                float offx = mDefaultRect.left - mFloatRect.left;
                mFloatRect.left = mDefaultRect.left;
                mFloatRect.right += offx;
            } else if (mDefaultRect.left <= mFloatRect.left + x && mDefaultRect.right < mFloatRect.right + x) {
                float offx = mDefaultRect.right - mFloatRect.right;
                mFloatRect.right = mDefaultRect.right;
                mFloatRect.left += offx;
            }
            if (mDefaultRect.top <= mFloatRect.top + y && mDefaultRect.bottom >= mFloatRect.bottom + y) {
                mFloatRect.bottom += y;
                mFloatRect.top += y;
            } else if (mDefaultRect.top > mFloatRect.top + y && mDefaultRect.bottom >= mFloatRect.bottom + y) {
                float offy = mDefaultRect.top - mFloatRect.top;
                mFloatRect.top = mDefaultRect.top;
                mFloatRect.bottom += offy;
            } else if (mDefaultRect.top <= mFloatRect.top + y && mDefaultRect.bottom < mFloatRect.bottom + y) {
                float offy = mDefaultRect.bottom - mFloatRect.bottom;
                mFloatRect.bottom = mDefaultRect.bottom;
                mFloatRect.top += offy;
            }
        } else if (mChangeType == BOTHSIDE) {
            float x = mMoveX - mTouchX;
            float y = mMoveY - mTouchY;
            if (mTouch == TOPLEFT) {
                if (mDefaultRect.left <= mFloatRect.left + x && mFloatRect.right >= mFloatRect.left + x)
                    mFloatRect.left += x;
                if (mDefaultRect.top <= mFloatRect.top + y && mFloatRect.bottom >= mFloatRect.top + y)
                    mFloatRect.top += y;

            } else if (mTouch == TOPRIGHT) {
                if (mDefaultRect.right >= mFloatRect.right + x && mFloatRect.left <= mFloatRect.right + x)
                    mFloatRect.right += x;
                if (mDefaultRect.top <= mFloatRect.top + y && mFloatRect.bottom >= mFloatRect.top + y)
                    mFloatRect.top += y;

            } else if (mTouch == BOTTOMLEFT) {
                if (mDefaultRect.left <= mFloatRect.left + x && mFloatRect.right >= mFloatRect.left + x)
                    mFloatRect.left += x;
                if (mDefaultRect.bottom >= mFloatRect.bottom + y && mFloatRect.top <= mFloatRect.bottom + y)
                    mFloatRect.bottom += y;

            } else if (mTouch == BOTTOMRIGHT) {
                if (mDefaultRect.right >= mFloatRect.right + x && mFloatRect.left <= mFloatRect.right + x)
                    mFloatRect.right += x;
                if (mDefaultRect.bottom >= mFloatRect.bottom + y && mFloatRect.top <= mFloatRect.bottom + y)
                    mFloatRect.bottom += y;
            }
        }
        invalidate();
    }

    /**
     * drawable转化为bitmap
     *
     * @param drawable
     * @return
     */
    public Bitmap creatBitmapFromDrawable(Drawable drawable) {
        if (null == drawable)
            return null;
        if (drawable instanceof BitmapDrawable)
            return ((BitmapDrawable) drawable).getBitmap();
        Bitmap bitmap = Bitmap.createBitmap(drawable.getIntrinsicWidth(), drawable.getIntrinsicHeight(), Bitmap.Config.ARGB_8888);
        Canvas canvas = new Canvas(bitmap);
        drawable.setBounds(0, 0, drawable.getIntrinsicHeight(), drawable.getIntrinsicHeight());
        drawable.draw(canvas);
        return bitmap;
    }

    /**
     * 获取截图的bitmap 这个方法是在图片的原图上处理的，也可以通过截图的方式，不过截图的方式
     * 获取的图片大小是有偏差的。
     *
     * @return
     */
    public Bitmap getCutBitmap() {
        Drawable drawable = getDrawable();
        if (null == drawable)
            return null;
        Bitmap bitmap = creatBitmapFromDrawable(drawable);
        // 计算截图框在原图片所在的位置大小，通过比例可以算出
        float left = (mFloatRect.left - mDefaultRect.left) / (float) mScaleX;
        float top = (mFloatRect.top - mDefaultRect.top) / (float) mScaleY;
        float width = mFloatRect.width() / (float) mScaleX;
        float height = mFloatRect.height() / (float) mScaleY;
        Bitmap dstBitmap = Bitmap.createBitmap(bitmap, (int) left, (int) top, (int) width, (int) height);
        return dstBitmap;
    }
}

       上面是代码 ，在使用的时候直接使用就行了 ，要注意的是在传入bitmap的时候要考虑它的大小，比如一个3M的图片转化成bitmap就几十M了 ，所以在转化bitmap时要采用先算宽高，通过缩小获取bitmap,这样可以避免OOM.

       补上自定义属性，只有一个，额外的可以自己加。

        

<resources>
    <declare-styleable name="CutView">
        <attr name="floatColor" format="color"/>
    </declare-styleable>
</resources>
       

      

z_Arze
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Android 自定义区域截图实现
12-07
Android 自定义区域截图实现 如有疏忽，欢迎指出。
实现半透明的popupwindow的源码，阿里大牛教你自己写Android第三方库
最新发布
04-02 336
第一个linearlayout里面的android:background=“#b0000000”，就是全屏背景，网上搜的好多半透明都是“#e0000000”，我觉得那颜色太深，“#b0000000”更合适。第二个linearlayout是popupwind的背景，里面的android:background="@drawable/downbutton_corner"是关键，边框，圆角都是里面定义的。dashWidth指的是边线的宽度 dashGap 指的是每条线之间的间距，（因为是边线是很多小横线组成的）。
android 半透明裁剪框 截取图片 头像
蒋文的博客
01-04 958
对于图片的裁剪操作，可能比较常见。但是在一些app中使用半透明裁剪框截图图片，用作头像，还如何实现呢？怎么把图片放在截取框的下面，以及怎么实现放大缩小后的截取呢？
android 从matrix获取处理过的图片的实际宽度
a7178077的专栏
05-28 3723
android 从matrix获取处理过的图片的实际宽度 //获取图片的实际宽度 private float getRealWidth() { Rect rectTemp = mImgPic.getDrawable().getBounds(); float[] values = new float[9];
android 全屏截屏，以及自定义控件截屏
01-28
android 全屏截屏，以及自定义控件截屏。看了很多代码以及查找资料。截屏好的一般都要root权限。我的没有，有点缺点。我的博客地址：http://blog.csdn.net/qq_16064871?viewmode=list
Android自定义截屏功能，类似QQ截屏
otc_yan的专栏
11-03 1719
因为公司业务需求 需要对一个屏幕进行截屏，但自带的截屏功能是远远不够项目的功能需求 ，我们是做一个画板软件 ，需要的像QQ那样截屏之后 ，可以看到我们自定义的工具，有画笔，按钮等等 。android自带的功能非常简单，只需要Intent隐式调用就完全足够了，但他是系统的应用 ，界面固定，无法定制修改。实现方法跟办法有很多种，下面记录下我实现的方法 。我是这样一个思路 ，重写一个View组件 ，在O
Android自定义控件eBook实现翻书效果实例详解
01-04
本文实例讲述了Android自定义控件eBook实现翻书效果的方法。分享给大家供大家参考，具体如下： 效果图： Book.java文件： package com.book; import android.app.Activity; import android.os.Bundle; import ...
Android自定义控件实现不规则区域点击事件
01-05
对于上面的图形实现主要用到svg，通过解析svg获取不规则的图形，对于svg文件这个一般需要美工提供，不需要我们开发实现。 实现上面效果第一步是解析svg文件代码如下 package demo.zjd.com.taiwandemo.utils; ...
手机摄像头矩形取景框拍照的实现（android）
05-09
利用camera类调用手机摄像头，且只拍摄SurfaceView预览界面特定区域内容（矩形取景框）（底层SurfaceView+上层绘制ImageView）
android 截图，固定截屏框大小
11-05
思路：①需要定义一个固定的截屏框。 ②被截取的图片需要可以放大缩小，移动。图片初始化的时候，将图片按比例放大或则缩小，将宽和高教小的一边，放大或则缩小到框的大小。放大我控制了只能放大到初始化的两倍。移动只能在框的外部移动。总之截图部位都有图片。 ③截图是取框的坐标轴，截取屏幕图片。
Android自定义图片裁剪框
08-09
经修改可通过拍照或选择安卓手机图库照片进入自定义裁剪框，原作者地址：https://github.com/jdamcd/android-crop，原项目只支持选择图库相片，不支持拍照，此为as项目，没有eclipse版本
android框选图片中的一部分并截取
06-13
android 框选 图片 截取
Android自定义控件实现简单写字板功能
09-02
主要介绍了Android自定义控件实现简单写字板功能的相关资料,需要的朋友可以参考下
Android自定义控件实现方向盘效果
01-03
在复习参考了许多自定义控件的基础上，我实现了一个最最基本的方向盘空间，并且可以根据方向做出相应的反应。话不多说，先看看效果。 做的有点丑，大家可以看看实际原理，后期再优化具体“方向盘”. 空间下面的...
Android自定义控件实现带文字提示的SeekBar
01-05
SeekBar控件在开发中还是比较常见的，比如音视频进度、音量调节等，但是原生控件有时还不能满足我们的需求，今天就来学习一下如何自定义SeekBar控件，本文主要实现了一个带文字指示器效果的SeekBar控件 看下最终效果...
自定义曲线图
z_Arze的博客
06-16 985
最近公司的项目需求要求用曲线图显示数据，开始的时候用的是第三方HelloChart,但是项目部需要动态显示曲线，也就是需要曲线往x轴慢慢的绘制过程，而不是HelloChart直接满x轴显示（我看了下HelloChart的代码，没有发现能满足需求的），所以又花了一个下午的时间自己写出满足需求的曲线图。先分析需要哪几个方面： 1.需要一个背景框架，所以写个ViewFrame类，里面含有画背景框架的属性，
android studio自定义控件可以实现什么功能
05-16
Android Studio自定义控件可以实现以下功能： 1. 实现特定的UI效果：通过自定义控件，可以实现一些Android原生控件无法实现的特定UI效果，比如自定义圆形进度条、自定义表格控件等。 2. 提高UI的复用性：自定义控件可以被多个Activity或Fragment共用，从而提高UI的复用性，减少代码冗余。 3. 提高开发效率：通过自定义控件，可以将一些常用的UI组件封装成一个控件，从而提高开发效率，减少代码量。 4. 实现特定的交互行为：通过自定义控件，可以实现一些特定的交互行为，比如手势识别、拖拽、缩放等。 5. 提高应用的性能：通过自定义控件，可以优化应用的性能，比如减少内存的占用、提高绘制效率等。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值