自定义View实现擦除蒙版显示图片功能/自定义View的存储/自定义View的属性

最新推荐文章于 2021-01-26 10:39:04 发布
最新推荐文章于 2021-01-26 10:39:04 发布
阅读量670 收藏
点赞数
分类专栏： Android 文章标签： 自定义View存储 自定义View属性 擦蒙版显示图片
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ForrestL/article/details/48550721
版权

自定义View实现擦除蒙版显示图片功能

1.首先找到一张图片，利用BitmapFactory.decodeResource()方法得到它，作为画布的最底层将其绘制到画布的最底层

canvas.drawBitmap(mBitmapBackground,new Rect(0,0,mBitmapBackground.getWidth(),mBitmapBackground.getHeight()),
                new Rect(0,0,width,heigth),null);//将第一个Rect的图片作为来源，来填充第二个Rect的区域

2.创建一个和画布大小一模一样的Bitmap，但里面什么都没有，然后以这个Bitmap为新的画布创建一个新的画布

//创建一个位图
        mBitmap=Bitmap.createBitmap(width,heigth, Bitmap.Config.ARGB_8888);
        mcanvasBit=new Canvas(mBitmap);//创建一个新的画布，是基于Bitmap即把Bitmap当做一个画布
        //在Ondraw方法中
         canvas.drawBitmap(mBitmap,0,0,null);

3.在Bitmap的画布上画上一层蒙版

mcanvasBit.drawRect(0, 0, width, heigth, mPaintCircle);//在Bitmap上画一个矩形。相当于一个蒙版//mPaintCircle只需要设置颜色即可

4.在Bitmap的画布上绘制一个路径，该路径代表用手点击屏幕，并在屏幕上移动的位置，该路径的画笔一定要设置成为XOR模型，同时还需要设置宽度（因为绘制的路径是线性的路径在第5部里）同时需要设置起始位置的形状（即点击屏幕不动时系统默认的形状，在这里设置为圆形）设置沿路径填充的形状（即手在屏幕上移动时，会不停的绘制该形状用来填充移动过的区域在这里设置为圆形，这样比方形好看的多）最后将画笔Style设置为FILL_AND_STROKE（填充和描边）


        mPaintRect.setStrokeJoin(Paint.Join.ROUND);//起始位置的形状，设置为圆形
        mPaintRect.setStrokeCap(Paint.Cap.ROUND);//绘制中间时使用的形状
        mPaintRect.setStrokeWidth(60);
        mPaintRect.setStyle(Paint.Style.FILL_AND_STROKE);//将格式设置为填充并且空心
        //PorterDuff.Mode为枚举类,一共有16个枚举值:每个枚举值代表不同的model
        PorterDuffXfermode mode=new PorterDuffXfermode(PorterDuff.Mode.XOR);
        mPaintRect.setXfermode(mode);

5.确定移动的位置和移动距离需要在onTouchEvent上面case：ACTION_DOWN和ACTION_MOVE，当ACTION_DOWN时需要记录当前这个点的位置，然后保存
当ACTION_MOVE时首先需要找到上个点的位置，然后得到最新点的位置，然后用mPath.lineTo来得到该路径，最后重新保存这个最新的点，这样就完成了不断更新触摸位置，同时能够记录该路径，最后调用 mcanvasBit.drawPath(mPath,mPaintRect);画出该路径

@Override
    public boolean onTouchEvent(MotionEvent event) {

        switch (event.getAction()){
            case MotionEvent.ACTION_DOWN:
                X=event.getX();//得到当前点击的位置
                Y=event.getY();
                mPath.moveTo(X,Y);//将该位置设置为Path的起点
                XOld=X;//将该位置保存
                YOld=Y;
                invalidate();
                return true;//必须要return true，否则不做处理
            case MotionEvent.ACTION_MOVE:
                //得到移动到的位置
                X=event.getX();
                Y=event.getY();
                mPath.moveTo(XOld,YOld);//首先移动到之前的那个点
                mPath.lineTo(X,Y);//然后移动到新的位置
                invalidate();
                //重新保存这个点
                XOld=X;
                YOld=Y;
                return true;
        }
        return super.onTouchEvent(event);
    }

自定义View的存储

1.首先在Activity中找到这个自定义的View，然后设置绘画缓存为true

2.创建一个Bitmap然后得到绘画的缓存

 mBitPicture.setDrawingCacheEnabled(true);//设置自定义View可以当做缓存
                Bitmap bit=mBitPicture.getDrawingCache(true);//创建一个Bitmap，得到自定义View的缓存

3.最后创建一个File将Bitmap写入该File文件里就能保存自定义View的图片了

    //第一个参数设置文件压缩格式
                    //第二个参数设置文件压缩尺寸大小（0~100），PNG格式图片可以忽略这个设置
                    //第三个参数是输出的位置
                    bit.compress(Bitmap.CompressFormat.PNG,100,new FileOutputStream(file));//设置为Png格式

自定义View的属性

1.首先在res的values文件夹下创建一个xml文件，在文件里面创建declare-styleable，表示自定义的属性，然后创建属性，包括属性的name和format，其中format表示接受的数据类型，xml文件如下：

 <declare-styleable name="customView">
        <attr name="change_picture" format="reference"></attr>
        <attr name="change_paint" format="dimension|reference"></attr>

    </declare-styleable>

2.在布局xml文件下声明已经创建的属性集合，在Androidstudio中只需要在后面加上res-auto就可以自己去寻找了，但是在eclipse中需要加上包名

xmlns:customview="http://schemas.android.com/apk/res-auto"

3.声明之后就可以在自己创建的View上添加属性了

customview:change_picture="@mipmap/ali"
    customview:change_paint="50sp"

4.在View类中找到该属性

 final TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.customView);
        BitmapDrawable drawable= (BitmapDrawable) a.getDrawable(R.styleable.customView_change_picture);
        if (drawable!=null){
            mBitmapBackground=drawable.getBitmap();
        }else {
            mBitmapBackground= BitmapFactory.decodeResource(getResources(), R.mipmap.cluo);//为Bitmap设置来源
        }

        int paintWidth=a.getDimensionPixelOffset(R.styleable.customView_change_paint,30);

所有代码

public class BitmapPicture extends View {
    private int width;
    private int heigth;
    private float X;
    private float Y;
    private float XOld;
    private float YOld;
    private Path mPath;
    private Bitmap mBitmap;
    private Bitmap mBitmapBackground;
    private Paint mPaintBackground;
    private Paint mPaintCircle;
    private Paint mPaintRect;
    private Canvas mcanvasBit;
    public BitmapPicture(Context context) {
        super(context);
    }

    public BitmapPicture(Context context, AttributeSet attrs) {
        super(context, attrs);
        final TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.customView);
        BitmapDrawable drawable= (BitmapDrawable) a.getDrawable(R.styleable.customView_change_picture);//找到图片并强制造型成为BitmapDrawable
        if (drawable!=null){
            mBitmapBackground=drawable.getBitmap();
        }else {
            mBitmapBackground= BitmapFactory.decodeResource(getResources(), R.mipmap.cluo);//为Bitmap设置来源
        }

        int paintWidth=a.getDimensionPixelOffset(R.styleable.customView_change_paint,30);//得到xml文档中chang_paint属性的值，第二个参数是默认值



        mPath=new Path();

        mPaintBackground=new Paint();
        mPaintBackground.setColor(Color.GRAY);

        mPaintCircle=new Paint();
        mPaintCircle.setColor(Color.CYAN);
        mPaintCircle.setAntiAlias(true);

        mPaintRect=new Paint();
        mPaintRect.setColor(Color.GRAY);
        mPaintRect.setAntiAlias(true);//抗锯齿

        mPaintRect.setStrokeJoin(Paint.Join.ROUND);//起始位置的形状，设置为圆形//设置画笔进入的形状，当画笔的Style设置为Stroke或者FillAndStroke时使用
        mPaintRect.setStrokeCap(Paint.Cap.ROUND);//绘制中间时使用的形状//设置笔帽的形式，当画笔的Style设置为Stroke或者FillAndStroke时使用
        mPaintRect.setStrokeWidth(paintWidth);
        mPaintRect.setStyle(Paint.Style.FILL_AND_STROKE);//将格式设置为填充并且空心
        //PorterDuff.Mode为枚举类,一共有16个枚举值:每个枚举值代表不同的model
        PorterDuffXfermode mode=new PorterDuffXfermode(PorterDuff.Mode.XOR);
        mPaintRect.setXfermode(mode);



    }
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        width=getDefaultSize(getSuggestedMinimumWidth(), widthMeasureSpec);
        heigth=getDefaultSize(getSuggestedMinimumHeight(), heightMeasureSpec);
        setMeasuredDimension(width,heigth);
        //创建一个位图
        mBitmap=Bitmap.createBitmap(width,heigth, Bitmap.Config.ARGB_8888);
        mcanvasBit=new Canvas(mBitmap);//创建一个新的画布，是基于Bitmap即把Bitmap当做一个画布
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
//        canvas.drawColor(Color.GRAY);//设置一个背景色
//        canvas.drawBitmap(mBitmap,0,0,mPaintBackground);//将Bitmap画到画布上
        canvas.drawBitmap(mBitmapBackground,new Rect(0,0,mBitmapBackground.getWidth(),mBitmapBackground.getHeight()),
                new Rect(0,0,width,heigth),null);//将第一个Rect的图片作为来源，来填充第二个Rect的区域
        canvas.drawBitmap(mBitmap,0,0,null);
//        mcanvasBit.drawCircle(width/2,heigth/2,width/2,mPaintCircle);//Bitmap上画一个圆
        mcanvasBit.drawRect(0, 0, width, heigth, mPaintCircle);//在Bitmap上画一个矩形。相当于一个蒙版
        mcanvasBit.drawPath(mPath,mPaintRect);//画出路径，经路径上的设置为透明
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {

        switch (event.getAction()){
            case MotionEvent.ACTION_DOWN:
                X=event.getX();//得到当前点击的位置
                Y=event.getY();
                mPath.moveTo(X,Y);//将该位置设置为Path的起点
                XOld=X;//将该位置保存
                YOld=Y;
                invalidate();
                return true;//必须要return true，否则不做处理
            case MotionEvent.ACTION_MOVE:
                //得到移动到的位置
                X=event.getX();
                Y=event.getY();
                mPath.moveTo(XOld,YOld);//首先移动到之前的那个点
                mPath.lineTo(X,Y);//然后移动到新的位置
                invalidate();
                //重新保存这个点
                XOld=X;
                YOld=Y;
                return true;
        }
        return super.onTouchEvent(event);
    }
}

xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:customview="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
<com.my.mywidget.widget.BitmapPicture
    android:id="@+id/bitmap_picture"
    android:layout_width="match_parent"
    android:layout_height="0dip"
    android:layout_weight="1"
    customview:change_picture="@mipmap/ali"
    customview:change_paint="50sp"
    />
    <Button
        android:id="@+id/button_save"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="保存"/>
</LinearLayout>

Acitvity

public class BitmapPictureActivity extends AppCompatActivity {
    private Button mBtnSave;
    private BitmapPicture mBitPicture;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.btimap_picture);
        mBitPicture= (BitmapPicture) findViewById(R.id.bitmap_picture);


        mBtnSave= (Button) findViewById(R.id.button_save);
        mBtnSave.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(BitmapPictureActivity.this, "成功保存图片", Toast.LENGTH_SHORT).show();
//                mBitPicture.setBackgroundResource(R.mipmap.aixi);
                //这两句话是将自定义View设置为可以保存
                mBitPicture.setDrawingCacheEnabled(true);//设置自定义View可以当做缓存
                Bitmap bit=mBitPicture.getDrawingCache(true);//创建一个Bitmap，得到自定义View的缓存
                File file=new File(Environment.getExternalStorageDirectory(),System.currentTimeMillis()+".png");//文件保存路径
                if (!file.exists()){
                    try {
                        file.createNewFile();

                    } catch (IOException e) {
                        e.printStackTrace();
                    }
                }
                try {
                    //第一个参数设置文件压缩格式
                    //第二个参数设置文件压缩尺寸大小（0~100），PNG格式图片可以忽略这个设置
                    //第三个参数是输出的位置
                    bit.compress(Bitmap.CompressFormat.PNG,100,new FileOutputStream(file));//设置为Png格式
                } catch (FileNotFoundException e) {
                    e.printStackTrace();
                }
            }
        });

    }
}

customView

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="customView">
        <attr name="change_picture" format="reference"></attr>
        <attr name="change_paint" format="dimension|reference"></attr>

    </declare-styleable>

</resources>
ForrestL
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Qt Scene graph画线和擦除
03-10
Qt Scene graph画线，并在QML中使用，相比于Canvas和QPainter的方式，在android中效果不错。亲测可用
安卓自定义View，实时绘图保存为图片
hemeng2009的专栏
11-18 1909
采用单缓冲与双缓冲机制分别实现画板功能
自定义View点击填充/实现擦除
GaoYue3321的博客
07-10 151
自定义Viewiew点击填充/实现擦除自定义View实现点击填充自定义View实现擦除 自定义View实现点击填充 自定义类继承View public class MyView3 extends View { Context context; int width;//宽 int height;//高 Paint paint = new Paint(); Paint paint1 = new Pa...
Android图片裁剪，裁剪外的区域添加蒙层
lhangtk的专栏
03-31 2138
对图片的裁剪主要就是使用canvas进行处理，使用canvas.drawBitmap drawBitmap(Bitmap bitmap, Rect src, RectF dst, Paint paint)； Rect src: 是对图片进行裁截，若是空null则显示整个图片 RectF dst：是图片在Canvas画布中显示的区域，            大于src则把sr
图形视图框架（The QGraphics View Framework)
xinpo66的专栏
08-27 1782
<br /><br />摘自http://yleesun.blog.163.com/blog/static/2941340220096110165817/， 感谢博主<br />图形视图提供了一个外表（surface）来实现大量的客户所做的2D图形项的管理和相互的结合；一个视图窗口部件来使这些项可视化，并支持缩放和旋转。<br />该框架包括一个事件传播体系，可以使得场景中的项的交叉可以达到双精度的精确控制。其中的项可以处理事件、鼠标按压、移动、释放和双击事件，它们也可以追踪鼠标的移动。<br />图形视图
Android自定义View模仿QQ讨论组头像效果
01-20
在Android开发中，自定义View是一项常见的任务，用于实现特定的UI效果或功能。本案例中，我们将讨论如何创建一个自定义View来模仿QQ讨论组的头像展示效果。这个效果包括在一个固定区域内，根据头像数量动态排列显示...
Android自定义控件之圆形/圆角的实现代码
01-20
总结来说，实现Android自定义圆形或圆角图像的关键在于利用自定义控件的`onDraw`方法，结合BitmapShader、Matrix和Canvas的绘制功能，动态生成符合需求的图形。这种方法不仅解决了背景复杂性和不同设备尺寸的问题，...
ios自定义蒙版
09-03
我们平时使用App的时候, 经常在第一次使用的时候, 会有类似”新手教程”之类的东西, 来引导我们应该如何使用这个App。 但是这个”新手教程”不同于常规的引导页(引导页指第一次打开App时候, 弹出的那种介绍视图。...
masked-view：React Native蒙版视图库
02-05
$ yarn add @react-native-masked-view/masked-view 要么 $ npm install --save @react-native-masked-view/masked-view 使用React Native> = 0.60 不再需要手动链接软件包。 iOS平台： $ npx pod-install 使用
Android 自定义View——蒙版擦除效果实现
To_be_Designer
09-18 8019
在《Android PorterDuff.Mode图形混合处理 》这篇博客中，我们讲解了PorterDuff.Mode对图形混合的处理。这篇我们将通过图形混合的原理，来制作一个手动擦除蒙版显示底层图片的控件。 　　 　　可能我这样描述这节的内容，大家还是不太理解到底要做什么。那我举几个例子，在QQ应用中，QQ聊天有一个功能就是发送手动绘制的图片，其实手动绘制图片这个功能就是通过一个自定义View
自定义View实现手绘签名并保存成图片存入本地
yrmao9893的博客
06-23 872
由于上个星期公司要实现一个功能，是关于合同的，需要用户签名，由此引发书写了这篇文章，此文设计的内容并不复杂，下面是梳理过程 自定义一个View监听手势动作，利用Path将手势轨迹绘制到canvas。然后创建一个CacheCanvas,并设置一个Bitmap，在绘制的到canvas的同时并绘制到cacheCanvas上，以便将其取出，将bitmap存入本地 直接看代码 SignatureView i...
Android实现将View转化为图片并保存到本地
陈正的博客
07-27 7452
一、概述app中有需求需要将View转化为图片并保存到本地，这里分两种情况： 1.View本身已经显示在界面上 2.View还没有添加到界面上或者没有显示（绘制）过二、实现方法*对于上述的第一种情况我使用下面代码即可：private void viewSaveToImage(View view) { view.setDrawingCacheEnabled(true);
Qt工作笔记-QGraphics框架场景中图元的移除与析构
IT1995的博客
07-31 1万+
1.场景里面使用removeItem函数，这个函数官方给出如下解释 注意这个词remove只是移除，并不是delete掉，所以只是场景中（显示出来的图元）没有了，空间还是存在。   举个代码例子： void MyGraphicsView::mouseReleaseEvent(QMouseEvent *event) { setCursor(Qt::ArrowCursor); ...
QPainter下绘制图像的擦除
weixin_47878978的博客
01-26 1万+
使用qt5.12.9的qml开发框架下，用QPainter绘图开发一个白板应用发现了一个问题： 图案绘制完成后，想要擦除一部分已经绘制的图像，想使用eraseRect函数将绘制的图案擦除。但是背景色为一张图片，绘制图像的层就是透明色，这样可以保证绘制的图像和背景不被冲突。但是你再调用eraseRect函数对已经绘制的图案做擦除操作，会覆盖之前的图案并留下白色的填充，无法用透明色覆盖填充。 解决： // point.model true：绘制红色的路径 false：清除红色的路径 if(poi.
自定义View(擦除蒙版得到背景，存储图片，更换背景)
tuanzi11的博客
09-18 1175
效果图：代码MyBitmapTwopackage com.example.administrator.mywidgetmode.Bitmapview;import android.content.Context; import android.graphics.Bitmap; import android.graphics.BitmapFactory; import android.graphics
ViewPager实现画廊效果
热门推荐
ForrestL的博客
08-04 1万+
1.先看一下效果 2.技术要点： 1、setClipChildren(boolean clipChildren)方法： clipChild用来定义他的子控件是否要在他应有的边界内进行绘制。 默认情况下，clipChild被设置为true。 也就是不允许进行扩展绘制。而在这个Demo中承载ViewPager的父容器必须要将其设置为false才可以绘制旁边的两页 2、setPageTr...
Android实现圆弧形渐变色进度条
ForrestL的博客
08-23 1万+
效果图：我写的这篇博客个人感觉非常的不详细，这也是根据UI设计的，不过大家掌握下文所点出来的重点方法也可以将其绘制出来，这里就不详细介绍绘制流程了 UI分析：这个UI细分为表盘刻度、进度条底色、进度条渐变色、最外层那个实心圆球和文字描述。接下来就逐个实现一、绘制表盘刻度1、绘制表盘的刻度主要是用了画布的旋转来进行绘制 利用canvas.rotate()方法来旋转画布。利用canva.drawTe
Android中百度导航引擎初始化失败问题
ForrestL的博客
11-12 6608
1.我使用的是AndroidStudio1.3版本（1.4出来了懒得更新）我遇到问题按照以下顺序进行解决2.首先检查assets里面的东西放入到工程里面了没有3.检查jar包是否导入4.检查权限然而，所有都检查过后并且确认无误以后依然出现了“百度引擎初始化失败的问题”，然后看出现报错的log，11-12 13:00:54.163 16195-16195/com.text.my.map E/link
uniapp自定义相机蒙版
最新发布
08-07
要实现自定义相机蒙版，首先需要使用`uni.chooseImage`接口选择图片作为蒙版素材。然后，使用`uni.scanCode`接口获取相机的扫描结果，将扫描结果与蒙版进行合成。最后，使用`uni.previewImage`接口预览合成后的照片...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值