Android 自定义view，画图板练习

最新推荐文章于 2024-09-10 05:22:29 发布
最新推荐文章于 2024-09-10 05:22:29 发布
阅读量258 收藏
点赞数
分类专栏： Android 文章标签： 画板

项目中想要实现一个简易画图板的需求，功能并不复杂，就是6个很常用的功能

画图板

陈小默同学有一个比较复杂，强大，高效的CrazyPalette，同学间商业互吹下，哈哈。里面基本常用的操作都有，代码写的很好，只是用的Kotlin，不过我需要的只是一个简单的绘图板，我参考了他的一些思路以及另外一篇android项目 之 记事本 ----- 画板功能之撤销、恢复和清空，做了一个简单的PaintView

1. PaintView

之前在网上看到别的博客说写的双缓冲是这个思路，这里感觉有错误，不清楚我写的这种方式算不算双缓冲。等过了这段加班，我再查查问问确认下 20170524 21:13

思路：使用双缓冲思路，有一个mBitmap，来记录最终的绘制。在手指滑动过程中，屏幕上会实时显示出手指滑动时的绘制轨迹。当手指离开屏幕后，显示最终存有内容的mBitmap

  1. 撤销和恢复利用LinkedList来模拟两个储存记录的栈
  2. 清空，这里偷懒，直接绘制白色，将之前绘制的内容盖住。也可以考虑使用new PorterDuffXfermode(PorterDuff.Mode.CLEAR)。但有些时候，个人感觉这种方式会出现些莫名其妙的情况，能直接绘制成单一纯色，就不使用PorterDuffXfermode
  3. 橡皮擦，这里使用了PorterDuffXfermode，并setBackgroundColor(Color.WHITE)以及把硬件加速关闭了

关于橡皮擦得额外说明下：
橡皮擦使用new PorterDuffXfermode(PorterDuff.Mode.CLEAR)是为了复习下PorterDuffXfermode，踩踩坑

这里有两个坑，硬件加速和背景穿透。当使用PorterDuff.Mode.CLEAR时，利用的是把上次绘制的东西给清除掉，这就导致在保存绘制的图片后，橡皮擦轨迹是透明的，而之前绘制的内容又被擦除了，就会把图片下方的当前系统背景色显示出来

问题

当我在电脑打开保存的图片时，橡皮擦轨迹会透出我电脑桌面背景的颜色。在手机打开就会透出手机背景颜色

解决办法：
在init()方法中，setBackgroundColor(Color.WHITE)，绘制了一个白色背景，但这样也就导致了过度绘制

根据需求，这里更好的思路就是把橡皮擦的颜色也直接设置成白色，更加简单而且没有PorterDuffXfermode的坑。但既然是练习，就踩踩坑

代码：

public class PaintView extends View {
    private Paint mPaint;
    private Path mPath;
    private Path eraserPath;
    private Paint eraserPaint;
    private Canvas mCanvas;
    private Bitmap mBitmap;
    private float mLastX, mLastY;//上次的坐标
    private Paint mBitmapPaint;
    //使用LinkedList 模拟栈，来保存 Path
    private LinkedList<PathBean> undoList;
    private LinkedList<PathBean> redoList;
    private boolean isEraserModel;


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

    /***
     * 初始化
     */
    private void init() {
        //关闭硬件加速
        //否则橡皮擦模式下，设置的 PorterDuff.Mode.CLEAR ，实时绘制的轨迹是黑色
         setBackgroundColor(Color.WHITE);//设置白色背景
        setLayerType(View.LAYER_TYPE_SOFTWARE, null);
        //画笔
        mPaint = new Paint(Paint.ANTI_ALIAS_FLAG | Paint.DITHER_FLAG);
        mPaint.setStrokeWidth(4f);
        mPaint.setAntiAlias(true);
        mPaint.setColor(Color.BLACK);
        mPaint.setStyle(Paint.Style.STROKE);
        mPaint.setStrokeJoin(Paint.Join.ROUND);//使画笔更加圆润
        mPaint.setStrokeCap(Paint.Cap.ROUND);//同上
        mBitmapPaint = new Paint(Paint.DITHER_FLAG);
        //保存签名的画布
        post(new Runnable() {//拿到控件的宽和高
            @Override
            public void run() {
                //获取PaintView的宽和高
                //由于橡皮擦使用的是 Color.TRANSPARENT ,不能使用RGB-565
                mBitmap = Bitmap.createBitmap(getWidth(), getHeight(), Bitmap.Config.ARGB_4444);
                mCanvas = new Canvas(mBitmap);
                //抗锯齿
                mCanvas.setDrawFilter(new PaintFlagsDrawFilter(0, Paint.ANTI_ALIAS_FLAG | Paint.FILTER_BITMAP_FLAG));
                //背景色
                mCanvas.drawColor(Color.WHITE);
            }
        });

        undoList = new LinkedList<>();
        redoList = new LinkedList<>();
    }

    /**
     * 绘制
     */
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        if (mBitmap != null) {
            canvas.drawBitmap(mBitmap, 0, 0, mBitmapPaint);//将mBitmap绘制在canvas上,最终的显示
            if (!isEraserModel) {
                if (null != mPath) {//显示实时正在绘制的path轨迹
                    canvas.drawPath(mPath, mPaint);
                }
            } else {
                if (null != eraserPath) {
                    canvas.drawPath(eraserPath, eraserPaint);
                }
            }
        }
    }

    /**
     * 撤销操作
     */
    public void undo() {
        if (!undoList.isEmpty()) {
            clearPaint();//清除之前绘制内容
            PathBean lastPb = undoList.removeLast();//将最后一个移除
            redoList.add(lastPb);//加入 恢复操作
            //遍历，将Path重新绘制到 mCanvas
            for (PathBean pb : undoList) {
                mCanvas.drawPath(pb.path, pb.paint);
            }
            invalidate();
        }
    }


    /**
     * 恢复操作
     */
    public void redo() {
        if (!redoList.isEmpty()) {
            PathBean pathBean = redoList.removeLast();
            mCanvas.drawPath(pathBean.path, pathBean.paint);
            invalidate();
            undoList.add(pathBean);
        }
    }


    /**
     * 设置画笔颜色
     */
    public void setPaintColor(@ColorInt int color) {
        mPaint.setColor(color);
    }

    /**
     * 清空，包括撤销和恢复操作列表
     */
    public void clearAll() {
        clearPaint();
        mLastY = 0f;
        //清空 撤销 ，恢复 操作列表
        redoList.clear();
        undoList.clear();
    }

    /**
     * 设置橡皮擦模式
     */
    public void setEraserModel(boolean isEraserModel) {
        this.isEraserModel = isEraserModel;
        if (eraserPaint == null) {
            eraserPaint = new Paint(mPaint);
            eraserPaint.setStrokeWidth(15f);
            eraserPaint.setColor(Color.TRANSPARENT);
            eraserPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.CLEAR));
        }
    }

    /**
     * 保存到指定的文件夹中
     */
    public boolean saveImg(String filePath, String imgName) {
        boolean isCanSave = mBitmap != null && mLastY != 0f && !undoList.isEmpty();
        if (isCanSave) {//空白板时，就不保存
            //保存图片
            File file = new File(filePath + File.separator + imgName);
            FileOutputStream fileOutputStream = null;
            try {
                fileOutputStream = new FileOutputStream(file);
                if (mBitmap.compress(Bitmap.CompressFormat.JPEG, 100, fileOutputStream)) {
                    fileOutputStream.flush();
                    return true;
                }
            } catch (java.io.IOException e) {
                e.printStackTrace();
            } finally {
                closeStream(fileOutputStream);
            }
        }
        return false;
    }

    /**
     * 是否可以撤销
     */
    public boolean isCanUndo() {
        return undoList.isEmpty();
    }

    /**
     * 是否可以恢复
     */
    public boolean isCanRedo() {
        return redoList.isEmpty();
    }

    /**
     * 清除绘制内容
     * 直接绘制白色背景
     */
    private void clearPaint() {
        mCanvas.drawColor(Color.WHITE);
        invalidate();
    }


    /**
     * 触摸事件 触摸绘制
     */
    @Override
    public boolean onTouchEvent(MotionEvent event) {
        if (!isEraserModel) {
            commonTouchEvent(event);
        } else {
            eraserTouchEvent(event);
        }
        invalidate();
        return true;
    }

    /**
     * 橡皮擦事件
     */
    private void eraserTouchEvent(MotionEvent event) {
        int action = event.getAction();
        float x = event.getX();
        float y = event.getY();
        switch (action) {
            case MotionEvent.ACTION_DOWN:
                //路径
                eraserPath = new Path();
                mLastX = x;
                mLastY = y;
                eraserPath.moveTo(mLastX, mLastY);
                break;
            case MotionEvent.ACTION_MOVE:
                float dx = Math.abs(x - mLastX);
                float dy = Math.abs(y - mLastY);
                if (dx >= 3 || dy >= 3) {//绘制的最小距离 3px
                    eraserPath.quadTo(mLastX, mLastY, (mLastX + x) / 2, (mLastY + y) / 2);
                }
                mLastX = x;
                mLastY = y;
                break;
            case MotionEvent.ACTION_UP:
                mCanvas.drawPath(eraserPath, eraserPaint);//将路径绘制在mBitmap上
                eraserPath.reset();
                eraserPath = null;
                break;
        }
    }

    /**
     * 普通画笔事件
     */
    private void commonTouchEvent(MotionEvent event) {
        int action = event.getAction();
        float x = event.getX();
        float y = event.getY();
        switch (action) {
            case MotionEvent.ACTION_DOWN:
                //路径
                mPath = new Path();
                mLastX = x;
                mLastY = y;
                mPath.moveTo(mLastX, mLastY);
                break;
            case MotionEvent.ACTION_MOVE:
                float dx = Math.abs(x - mLastX);
                float dy = Math.abs(y - mLastY);
                if (dx >= 3 || dy >= 3) {//绘制的最小距离 3px
                    //利用二阶贝塞尔曲线，使绘制路径更加圆滑
                    mPath.quadTo(mLastX, mLastY, (mLastX + x) / 2, (mLastY + y) / 2);
                }
                mLastX = x;
                mLastY = y;
                break;
            case MotionEvent.ACTION_UP:
                mCanvas.drawPath(mPath, mPaint);//将路径绘制在mBitmap上
                Path path = new Path(mPath);//复制出一份mPath
                Paint paint = new Paint(mPaint);
                PathBean pb = new PathBean(path, paint);
                undoList.add(pb);//将路径对象存入集合
                mPath.reset();
                mPath = null;
                break;
        }
    }

    /**
     * 关闭流
     */
    private void closeStream(Closeable closeable) {
        if (closeable != null) {
            try {
                closeable.close();
            } catch (IOException e) {
                e.printStackTrace();
            }
        }
    }

    /**
     * 测量
     */
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        int wSpecMode = MeasureSpec.getMode(widthMeasureSpec);
        int wSpecSize = MeasureSpec.getSize(widthMeasureSpec);
        int hSpecMode = MeasureSpec.getMode(heightMeasureSpec);
        int hSpecSize = MeasureSpec.getSize(heightMeasureSpec);

        if (wSpecMode == MeasureSpec.EXACTLY && hSpecMode == MeasureSpec.EXACTLY) {
            setMeasuredDimension(widthMeasureSpec, heightMeasureSpec);
        } else if (wSpecMode == MeasureSpec.AT_MOST) {
            setMeasuredDimension(200, hSpecSize);
        } else if (hSpecMode == MeasureSpec.AT_MOST) {
            setMeasuredDimension(wSpecSize, 200);
        }
    }

    /**
     * 路径对象
     */
    class PathBean {
        Path path;
        Paint paint;

        PathBean(Path path, Paint paint) {
            this.path = path;
            this.paint = paint;
        }
    }

}

代码中，重要地方都有注释

2. Activity

布局代码：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <android.support.v7.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_margin="15dp"
        android:layout_weight="1"
        app:cardElevation="4dp"
        app:cardUseCompatPadding="true">

        <com.example.gcc.okhttpl.richeditor.PaintView
            android:id="@+id/activity_paint_pv"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />
    </android.support.v7.widget.CardView>


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:gravity="center_vertical"
        android:orientation="horizontal">

        <TextView
            android:id="@+id/activity_paint_undo"
            style="@style/paint_menu_text_view_style"
            android:text="撤销" />

        <TextView
            android:id="@+id/activity_paint_redo"
            style="@style/paint_menu_text_view_style"
            android:text="恢复" />

        <TextView
            android:id="@+id/activity_paint_color"
            style="@style/paint_menu_text_view_style"
            android:text="红色" />

        <TextView
            android:id="@+id/activity_paint_clear"
            style="@style/paint_menu_text_view_style"
            android:text="清空" />

        <TextView
            android:id="@+id/activity_paint_eraser"
            style="@style/paint_menu_text_view_style"
            android:text="橡皮擦" />

        <TextView
            android:id="@+id/activity_paint_save"
            style="@style/paint_menu_text_view_style"
            android:text="保存" />

    </LinearLayout>
</LinearLayout>

Activity代码

public class PaintViewActivity extends AppCompatActivity {
    private PaintView paintView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_paint_view);
        initView();
        initMenu();
    }

    /**
     * 初始化
     */
    private void initView() {
        paintView = (PaintView) findViewById(R.id.activity_paint_pv);
    }

    /**
     * 初始化底部菜单
     */
    private void initMenu() {
        //撤销
        menuItemSelected(R.id.activity_paint_undo, new MenuSelectedListener() {
            @Override
            public void onMenuSelected() {
                ToastUtils.show(PaintViewActivity.this, "撤销");
                paintView.undo();
            }
        });
        //恢复
        menuItemSelected(R.id.activity_paint_redo, new MenuSelectedListener() {
            @Override
            public void onMenuSelected() {
                ToastUtils.show(PaintViewActivity.this, "恢复");
                paintView.redo();
            }
        });

        //颜色
        menuItemSelected(R.id.activity_paint_color, new MenuSelectedListener() {
            @Override
            public void onMenuSelected() {
                ToastUtils.show(PaintViewActivity.this, "红色");
                paintView.setPaintColor(Color.RED);
            }
        });
        //清空
        menuItemSelected(R.id.activity_paint_clear, new MenuSelectedListener() {
            @Override
            public void onMenuSelected() {
                ToastUtils.show(PaintViewActivity.this, "清空");
                paintView.clearAll();
            }
        });

        //橡皮擦
        menuItemSelected(R.id.activity_paint_eraser, new MenuSelectedListener() {
            @Override
            public void onMenuSelected() {
                ToastUtils.show(PaintViewActivity.this, "橡皮擦");
                paintView.setEraserModel(true);
            }
        });

        //保存
        menuItemSelected(R.id.activity_paint_save, new MenuSelectedListener() {
            @Override
            public void onMenuSelected() {
                String path = Environment.getExternalStorageDirectory().getPath()
                        + File.separator + Strings.FILE_PATH + File.separator + Strings.CACHE_PATH;
                String imgName = "paint.jpg";
                if (paintView.saveImg(path,imgName)) {
                    ToastUtils.show(PaintViewActivity.this, "保存成功");
                }
            }
        });
    }

    /**
     * 选中底部 Menu 菜单项
     */
    private void menuItemSelected(int viewId, final MenuSelectedListener listener) {
        findViewById(viewId).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                listener.onMenuSelected();
            }
        });

    }

    @Override
    protected void onDestroy() {
        super.onDestroy();
        ToastUtils.cancel();
    }

    interface MenuSelectedListener {
        void onMenuSelected();
    }
}

这是橡皮擦使用PorterDuffXfermode踩坑思路

2.1 橡皮擦直接绘制白色背景思路

简单修改PaintView代码：

1. 首先把硬件加速打开,也就是把init()方法里，下面行代码注释掉：
  //setBackgroundColor(Color.WHITE);
  //setLayerType(View.LAYER_TYPE_SOFTWARE, null);

2.修改橡皮擦颜色
 eraserPaint.setColor(Color.WHITE);
 //eraserPaint.setColor(Color.TRANSPARENT);
 //eraserPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.CLEAR));

这种思路即不会导致过度绘制，也不会有硬件加速的坑，但前提是绘图板背景颜色是纯色的

3. 最后

即使在使用过渡绘制思路的情况下，暂时感觉效率也可以，在低端机上也没有明显的卡顿感，绘制轨迹蛮跟手的。个人感觉这种绘图板并不需要SurfaceView

有错误，请指出

共勉 : )

 

Peng.Lei
关注
专栏目录
Android 自定义View之绘图
moira33的博客
01-19 1万+
【Android 自定义View之绘图】 Android 自定义View之绘图 基础图形的绘制 一Paint与Canvas Paint Paint的基本设置函数 setAntiAliastrue 设置是否抗锯齿 2setStyle PaintStyle style 设置填充样式 3setColorColorInt int color 设置画笔颜色 4setStrokeWidthfloat w
Android studio之图形与图像处理
fjnu_se的博客
05-28 5030
前言： 众所周知，决定一个Android应用是否可以被用户接受最重要的方面就是用户界面，为了让我们的Android给用户提供一个更友好的界面，就需要我们在应用中使用和插入图片了。Android系统提供了丰富的图片功能支持，其中就包括处理静态图片和动画等等。 一、使用简单的图片 (1)使用Drawable对象 为Android应用添加了Drawable资源之后，Android SDK会为这份资源在R...
android自定义View画板
12-23
android 自定义view 画板
Android 自定义view画图板练习
mm_name_zhang的博客
12-19 368
项目中想要实现一个简易画图板的需求，功能并不复杂，就是6个很常用的功能 画图板 陈小默同学有一个比较复杂，强大，高效的CrazyPalette，同学间商业互吹下，哈哈。里面基本常用的操作都有，代码写的很好，只是用的Kotlin，不过我需要的只是一个简单的绘图板，我参考了他的一些思路以及另外一篇android项目 之 记事本 ----- 画板功能之撤销、恢复和清空，做了一个简单的PaintV...
Android自定义view详解，使用实例，自定义属性，贝塞尔曲线
最新发布
2401_86968216的博客
09-10 1460
8.2.1 在java中定义颜色//java中使用Color类定义颜色//灰色//Color类是使用ARGB值进行表示//半透明红色//带有透明度的红色8.2.2 在xml文件中定义颜色//定义了红色（没有alpha（透明）通道）//定义了蓝色（没有alpha（透明）通道）#f00 //低精度 - 不带透明通道红色#af00 //低精度 - 带透明通道红色#ff0000 //高精度 - 不带透明通道红色#aaff0000 //高精度 - 带透明通道红色。
Android自定义View-练习一
weixin_34144848的博客
06-13 220
2019独角兽企业重金招聘Python工程师标准>>> ...
Android自定义View训练【1】
Jing
01-08 413
Android自定义View训练【1】
Android 自定义View练习之水波纹
mingyunxiaohai的专栏
01-14 872
今天看了网上的一个叫潭州学院的课程里的一个自定义View水波纹效果的视频。感觉效果不错，看完之后自己敲了一遍。 先看一下效果           以前也曾想过做个类似的效果，但最终只是实现了一个的效果，多了的话怎么办呢，视频中提供了一个非常好的方法。根据面向对象的思想，将每个wave看成一个对象 定义一个类： class Wave { Paint p; int
iOS：iOS开发非常全的三方库、插件等等
dienangpiao2051的博客
09-23 7536
iOS开发非常全的三方库、插件等等 github排名:https://github.com/trending, github搜索：https://github.com/search. 此文章转自github:https://github.com/Tim9Liu9/TimLiu-iOS 一、UI 下拉刷新 EGOTableViewPullRefresh- 最早...
iOS 强大第三方资源库
weixin_34237596的博客
03-08 1万+
Github用法 git-recipesGit recipes in Chinese. 高质量的Git中文教程. lark怎样在Github上面贡献代码 my-git有关 git 的学习资料 gitignore非常赞 有用的.gitignore模板集合(忽略上传的文件集合)，包含了各种语言. 完整App@ open-source-ios-apps- iOS开源App集合，分：swift与Objec...
web学习笔记
热门推荐
刘群智的博客
07-27 1万+
常用属性............................................................................................ 1 Html基础........................................................................................... 3 ...
Android自定义SurfaceView——实现画板功能
07-26
相关博客 http://blog.csdn.net/qq_25193681/article/details/52005375
android自定义View练习之波浪View
SheaJIn的博客
02-09 869
文章转载自 http://blog.csdn.NET/wingichoy/article/details/50460213 先上效果图: 就是这样子的波浪View.类似口香糖包装纸. 其实原理很简单,就是一个矩形加上好多个小三角形或者是矩形加上好多小半圆形 首先.创建一个类继承自View,重写其构造方法,并重写Draw()方法.如下 public WaveVi
android自定义view练习,Android自定义View仿QQ健康界面
weixin_35174422的博客
05-26 196
最近一直在学习自定义View相关的知识，今天给大家带来的是QQ健康界面的实现。先看效果图：可以设置数字颜色，字体颜色，运动步数，运动排名，运动平均步数，虚线下方的蓝色指示条的长度会随着平均步数改变而进行变化。整体效果还是和QQ运动健康界面很像的。自定义View四部曲，一起来看看怎么实现的。1.自定义view的属性：//自定义属性名,定义公共属性//自定义View的属性依次定义了字体颜色，线的颜色2...
android自定义view练习,Android 自定义View练手Demo（三）Android自定义View实现微信拍一拍的动画效果...
weixin_36210904的博客
05-26 214
微信的头像拍一拍效果可以说是很吸引人了，就是下面这个gif图，图片展示和实际效果还是有差距的，实际体验效果更佳！1-3.gif那么我们如何通过自定义View，来实现微信的这种效果呢？首先我们得把图片做的像一个用户的头像，这里我就用热巴的头像吧！1.自定义View实现圆角矩形的头像因为这样才更像微信的头像啊，原生的ImageView是没有圆角的，所以实现一个圆角的ImageViewclass Sha...
Android自定义view的实战
陈柱的博客
02-27 359
Android自定义控件的分析和解决问题的思路，我们需要提高的是分析问题和解决问题的能力，功能实现只是最后的结果
android 自定义View 练手 学习 蜘蛛网 控件
因为热爱,所以专注
12-17 1221
android 自定义View 练手 学习 蜘蛛网 控件
自定义View练习题目整理
qq_46269365的博客
02-24 648
自定义View练习题目记录整理
Android自定义View：画图板与刮刮卡效果实现
"Android 自定义View的实现，包括画图板功能和刮刮卡效果" 在Android开发中，自定义View是一种常见的需求，用于实现特定的界面交互或视觉效果。本示例主要介绍如何实现一个画图板功能，并提供了一个简单的刮刮卡...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值