android实现画板功能

最新推荐文章于 2024-05-24 10:06:57 发布
最新推荐文章于 2024-05-24 10:06:57 发布
阅读量960 收藏 8
点赞数
分类专栏： 自定义View

效果图：

这是一个灰常简单的画板，不过麻雀虽小，五脏俱全：

  1. 支持撤销（undo）；
  2. 支持反撤销（redo）；
  3. 支持橡皮擦（eraser）；
  4. 支持清除功能（clear）；
  5. 支持保存为图像（save）。

github地址点这里,欢迎fork,star

关键代码

非常简短，只有200来行

/**
 * Created by wensefu on 17-3-21.
 */
public class PaletteView extends View {

    private Paint mPaint;
    private Path mPath;
    private float mLastX;
    private float mLastY;
    private Bitmap mBufferBitmap;
    private Canvas mBufferCanvas;

    private static final int MAX_CACHE_STEP = 20;

    private List<DrawingInfo> mDrawingList;
    private List<DrawingInfo> mRemovedList;

    private Xfermode mClearMode;
    private float mDrawSize;
    private float mEraserSize;

    private boolean mCanEraser;

    private Callback mCallback;

    public enum Mode {
        DRAW,
        ERASER
    }

    private Mode mMode = Mode.DRAW;

    public PaletteView(Context context) {
        this(context,null);
    }

    public PaletteView(Context context, AttributeSet attrs) {
        super(context, attrs);
        setDrawingCacheEnabled(true);
        init();
    }

    public interface Callback {
        void onUndoRedoStatusChanged();
    }

    public void setCallback(Callback callback){
        mCallback = callback;
    }

    private void init() {
        mPaint = new Paint(Paint.ANTI_ALIAS_FLAG | Paint.DITHER_FLAG);
        mPaint.setStyle(Paint.Style.STROKE);
        mPaint.setFilterBitmap(true);
        mPaint.setStrokeJoin(Paint.Join.ROUND);
        mPaint.setStrokeCap(Paint.Cap.ROUND);
        mDrawSize = 20;
        mEraserSize = 40;
        mPaint.setStrokeWidth(mDrawSize);
        mPaint.setColor(0XFF000000);

        mClearMode = new PorterDuffXfermode(PorterDuff.Mode.CLEAR);
    }

    private void initBuffer(){
        mBufferBitmap = Bitmap.createBitmap(getWidth(), getHeight(), Bitmap.Config.ARGB_8888);
        mBufferCanvas = new Canvas(mBufferBitmap);
    }

    private abstract static class DrawingInfo {
        Paint paint;
        abstract void draw(Canvas canvas);
    }

    private static class PathDrawingInfo extends DrawingInfo{

        Path path;

        @Override
        void draw(Canvas canvas) {
            canvas.drawPath(path, paint);
        }
    }

    public Mode getMode() {
        return mMode;
    }

    public void setMode(Mode mode) {
        if (mode != mMode) {
            mMode = mode;
            if (mMode == Mode.DRAW) {
                mPaint.setXfermode(null);
                mPaint.setStrokeWidth(mDrawSize);
            } else {
                mPaint.setXfermode(mClearMode);
                mPaint.setStrokeWidth(mEraserSize);
            }
        }
    }

    public void setEraserSize(float size) {
        mEraserSize = size;
    }

    public void setPenRawSize(float size) {
        mEraserSize = size;
    }

    public void setPenColor(int color) {
        mPaint.setColor(color);
    }

    public void setPenAlpha(int alpha) {
        mPaint.setAlpha(alpha);
    }

    private void reDraw(){
        if (mDrawingList != null) {
            mBufferBitmap.eraseColor(Color.TRANSPARENT);
            for (DrawingInfo drawingInfo : mDrawingList) {
                drawingInfo.draw(mBufferCanvas);
            }
            invalidate();
        }
    }

    public boolean canRedo() {
        return mRemovedList != null && mRemovedList.size() > 0;
    }

    public boolean canUndo(){
        return mDrawingList != null && mDrawingList.size() > 0;
    }

    public void redo() {
        int size = mRemovedList == null ? 0 : mRemovedList.size();
        if (size > 0) {
            DrawingInfo info = mRemovedList.remove(size - 1);
            mDrawingList.add(info);
            mCanEraser = true;
            reDraw();
            if (mCallback != null) {
                mCallback.onUndoRedoStatusChanged();
            }
        }
    }

    public void undo() {
        int size = mDrawingList == null ? 0 : mDrawingList.size();
        if (size > 0) {
            DrawingInfo info = mDrawingList.remove(size - 1);
            if (mRemovedList == null) {
                mRemovedList = new ArrayList<>(MAX_CACHE_STEP);
            }
            if (size == 1) {
                mCanEraser = false;
            }
            mRemovedList.add(info);
            reDraw();
            if (mCallback != null) {
                mCallback.onUndoRedoStatusChanged();
            }
        }
    }

    public void clear() {
        if (mBufferBitmap != null) {
            if (mDrawingList != null) {
                mDrawingList.clear();
            }
            if (mRemovedList != null) {
                mRemovedList.clear();
            }
            mCanEraser = false;
            mBufferBitmap.eraseColor(Color.TRANSPARENT);
            invalidate();
            if (mCallback != null) {
                mCallback.onUndoRedoStatusChanged();
            }
        }
    }

    public Bitmap buildBitmap() {
        Bitmap bm = getDrawingCache();
        Bitmap result = Bitmap.createBitmap(bm);
        destroyDrawingCache();
        return result;
    }

    private void saveDrawingPath(){
        if (mDrawingList == null) {
            mDrawingList = new ArrayList<>(MAX_CACHE_STEP);
        } else if (mDrawingList.size() == MAX_CACHE_STEP) {
            mDrawingList.remove(0);
        }
        Path cachePath = new Path(mPath);
        Paint cachePaint = new Paint(mPaint);
        PathDrawingInfo info = new PathDrawingInfo();
        info.path = cachePath;
        info.paint = cachePaint;
        mDrawingList.add(info);
        mCanEraser = true;
        if (mCallback != null) {
            mCallback.onUndoRedoStatusChanged();
        }
    }

    @Override
    protected void onDraw(Canvas canvas) {
        if (mBufferBitmap != null) {
            canvas.drawBitmap(mBufferBitmap, 0, 0, null);
        }
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        final int action = event.getAction() & MotionEvent.ACTION_MASK;
        final float x = event.getX();
        final float y = event.getY();
        switch (action) {
            case MotionEvent.ACTION_DOWN:
                mLastX = x;
                mLastY = y;
                if (mPath == null) {
                    mPath = new Path();
                }
                mPath.moveTo(x,y);
                break;
            case MotionEvent.ACTION_MOVE:
                //这里终点设为两点的中心点的目的在于使绘制的曲线更平滑，如果终点直接设置为x,y，效果和lineto是一样的,实际是折线效果
                mPath.quadTo(mLastX, mLastY, (x + mLastX) / 2, (y + mLastY) / 2);
                if (mBufferBitmap == null) {
                    initBuffer();
                }
                if (mMode == Mode.ERASER && !mCanEraser) {
                    break;
                }
                mBufferCanvas.drawPath(mPath,mPaint);
                invalidate();
                mLastX = x;
                mLastY = y;
                break;
            case MotionEvent.ACTION_UP:
                if (mMode == Mode.DRAW || mCanEraser) {
                    saveDrawingPath();
                }
                mPath.reset();
                break;
        }
        return true;
    }
}

原理分析

总的来讲，思路其实很简单：

  • 接收到move事件后，在屏幕上画出相应的轨迹；
  • 撤销功能：在画轨迹时，记录每一步的轨迹和画笔属性，每次撤销时把最后一步删除，然后重绘；
  • 反撤销功能：撤销时把撤销的轨迹和画笔属性保存在另一个列表里，反撤销时从这个列表里取出来放到记录绘制信息的列表里，然后重绘；
  • 橡皮擦功能：这里主要应用到android的图象混合（Xfermode）知识，后面会对其进行讲解；
  • 清除功能：这个非常简单，清除屏上的像素记录即可；
  • 绘制：考虑到性能问题，这里使用了双缓冲绘图技术。

android的图象混合（Xfermode）

图象混合本质上用一句话解释就是：

按照某种算法将画布上你想要绘制的区域的每个像素的ARGB和你将要在这个区域绘制的ARGB进行组合变换。

举个例子，
我现在有个自定义View, 背景画成绿色的，
我再在上面绘制一个蓝色的圆，在不设置Xfermode（不进行图像混合）的情况下效果是这样的：

代码：

    @Override
    protected void onDraw(Canvas canvas) {

        canvas.drawColor(Color.GREEN);

        canvas.drawCircle(getWidth() / 2, getHeight() / 2, 300, mPaint);
    }

现在我改一下代码，给Paint设置一个Xfermode，

 public MyView(Context context, AttributeSet attrs) {
        super(context, attrs);
        mPaint = new Paint(Paint.ANTI_ALIAS_FLAG | Paint.DITHER_FLAG);
        mPaint.setColor(Color.BLUE);
        mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.CLEAR));
    }

    @Override
    protected void onDraw(Canvas canvas) {

        canvas.drawColor(Color.GREEN);

        canvas.drawCircle(getWidth() / 2, getHeight() / 2, 300, mPaint);
    }

效果是这样的：

 

为什么设置Xfermode后圆会变成黑色呢？代码里并没有设置Paint的颜色为黑色呀！

原因是，设置Xfermode为new PorterDuffXfermode(PorterDuff.Mode.CLEAR)后，按照这个混合模式的算法，canvas上圆绘制的区域的所有像素点ARGB全部被置0了，
因此实际上圆绘制区域是透明的，显示为黑色是因为activity的window背景色是黑色的。

Xfermode有三个子类，AvoidXfermode，PixelXorXfermode，PorterDuffXfermode，前两个在API 16上已经过时了，现在最常用的是PorterDuffXfermode，目前支持18种图像混合算法，分别产生不同的混合效果，做橡皮擦功能用到了CLEAR算法，其他算法的效果大家有兴趣可以参考google官方的介绍，api demo里也有相关的例子。
需要注意的是，Xfermode的某些算法不支持硬件加速，例如PorterDuffXfermode的DARKEN，LIGHTEN以及OVERLAY是不支持硬件加速的。具体参见android developer文档（需要梯子fk）：hardware-accel.html#unsupported

android双缓冲绘图技术##

在理解android的双缓冲绘图概念之前，我们先想一想，何谓缓冲？
所谓缓冲，简单地说就是将多个将要执行的独立的任务集结起来，一起提交。
打个比方，现实生活中，你现在要将很多砖从A处搬到B处，原始的方法是徒手一次搬几块，这就是没有使用“缓存”的方法。你也可以用一辆拖车，先把砖搬到拖车上，再把拖车拉到B处，这就是使用了“缓存”的方法。

每个canvas都有对应的一个bitmap，绘图的过程实际上就是往这个bitmap上写入ARGB信息，然后把这些信息交给GPU进行显示。这里面其实已经包含了一次缓冲的过程。

所以，讲到这里，双缓冲的概念我想你已经明白了。没错，绘图时的双缓冲其实就是再增加一个canvas，把想要绘制的内容先绘制到这个增加的canvas对应的bitmap上，写完后再把这个bitmap的ARGB信息一次提交给上下文的canvas去绘制。双缓冲技术在绘制数据量较大时在性能上有明显的提升，画板程序之所以用到了双缓存，也是基于提高绘制效率的考虑。

Luckie stone
关注
  • 0
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Android 实现画板功能
12-25
其次，**绘图API**是实现画板功能的核心。Android的`Canvas`类提供了丰富的绘图方法，如`drawLine()`, `drawPath()`, `drawCircle()`等，用于在画布上绘制各种图形。开发者可能通过记录用户的触摸事件（如`...
【Android入门03】从0开发一个绘画板
n0ahmayberry的博客
06-29 1005
前言 前2章我们已经学习了如何制作一个计算器，如何制作一个手势解锁页面。不过这些都只是开胃菜，并不能算一个比较完整的程序。今天我们就来学习一下如何开发一个较为完整的应用——绘画板。本文主要分为界面搭建和实现逻辑两个部分。 需求分析 在进行程序开发之前，我们首先需要明确这个应用应该具备什么功能。一个合格的绘画板，首先应该具有如下功能： 1.调节画笔粗细，画笔颜色功能 2.橡皮擦功能 3.撤销功能 在实现了基本功能后，你还可以选择对功能进行扩充，如： 1.将作品保存到本地，并进行分享 2.从本地相册选择图片，
安卓动画基础--画板
eeeeety6208的博客
10-15 441
在res/drawable///缓存的图片//画布//路径//真实的画笔//画布的画笔//临时的坐标//保存path的路径的集合//保存删除的path的路径//路径的的对象//屏幕的//颜色集合//路径//画笔}};//设置格式}/** * 初始化画布和缓冲区图片 */
Android 画图板 （画笔、箭头、直线、折线）
最新发布
魑魅魍魉9527
05-24 255
【代码】Android 画图板 （画笔、箭头、直线、折线）
【安卓】自定义View实现画板涂鸦等功能
小李不背锅的博客
08-25 1571
绘制主要用到Paint和Path,大体思路都是监听OnTouchEvent事件，绘制路径或者其他图案，开发这个项目用时一周。
Android画板
wangxuyangwxy的博客
04-26 359
简单的画笔类的应用，画布画笔的应用显示。要注意虚化BlurMaskFilter类的应用、和轮廓EmbossMaskFilter类的应用。
Android自定义SurfaceView实现画板功能
09-01
总结起来，Android自定义SurfaceView实现画板功能主要涉及以下步骤： - 初始化SurfaceView及其关联的Path和Paint对象。 - 实现SurfaceHolder.Callback和Runnable接口，监听Surface状态并进行绘图操作。 - 处理用户...
Android实现画画板案例
08-26
以上就是Android实现画画板的基本步骤。通过这些知识，开发者可以创建一个简单的绘画应用，允许用户自由创作并保存他们的作品。在实际应用中，还可以进一步扩展功能，如添加橡皮擦、撤销/重做操作、选择多种形状绘制...
Android 自定义画板
qq_57197323的博客
09-05 292
自定义画板 电子签名
Android画板开发之撤销反撤销功能
08-26
主要为大家详细介绍了Android画板开发之撤销，反撤销功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Android如何实现画板功能？
大模型学习路线
06-30 1193
Android实现画板主要有2种方式，一种是用自定义View实现，另一种是通过Canvas类实现。当然自定义View内部也是用的Canvas。本文将分析两种方法，第一种就是用SurfaceView来实现，在这里介绍一下关于SurfaceView的知识：SurfaceView继承自View，两者都可以实现绘图功能，那么他们有什么不同呢？ 先说下Android绘制视图的原理——View通过刷新来绘制视图，Android系统则通过发出VSYNC信号进行屏幕绘制，玩游戏的朋友都应该知道"垂直同步"，VSYNC就是垂
Android 画板小工具
邵旺运的博客
10-18 425
这个demo的功能还是相对比较简单的，然后没有什么好讲的，只不过这个demo中有涉及到Android 的运行时权限申请，兼容Android13的，可以重点关注一下，其他的都是UI层的东西，基本上把代码复制过去，就可以用了，真的有什么问题了，评论区留言。先看一下效果，吐槽一下csdn的视频上传，质量压缩的比较厉害，然后比例也发生变化了，反正是大家凑合看吧，文末会放源码（我的所有demo的源码都是不需要积分的）1.自定义画板SignatureView。Android画板小工具测试视频。我主要放一下关键代码吧。
初探安卓画板
gaosililin的专栏
02-16 600
在java学习使用画板到现在貌似都快半年了，初探安卓的自定义组件使用到画板感觉非常不适用的样子。 在java使用的画板跟安卓的画板是有挺大的区别，下面记录一下学校安卓的画板的使用  在java当中，话矩形圆形都是空心的，而在安卓默认却是填满的 java当中使用Graphcs.draw--   而在安卓却是吧画布当作参数放在后面…… package com.example.gaosi.ble
Android画板功能代码赏析
我的专栏
08-05 339
Android画板功能代码赏析
Android studio实现画板功能，文末有彩蛋
m0_63102527的博客
03-18 994
今天关于面试的分享就到这里，还是那句话，有些东西你不仅要懂，而且要能够很好地表达出来，能够让面试官认可你的理解，例如Handler机制，这个是面试必问之题。有些晦涩的点，或许它只活在面试当中，实际工作当中你压根不会用到它，但是你要知道它是什么东西。最后在这里小编分享一份自己收录整理上述技术体系图相关的几十套腾讯、头条、阿里、美团等公司2021年的面试题，把技术点整理成了视频和PDF（实际上比预期多花了不少精力），包含知识脉络 + 诸多细节，由于篇幅有限，这里以图片的形式给大家展示一部分。还有。
1.24简易的android画板（版本1）
qq_60637458的博客
01-24 573
android构建简单的画板
Android实现画板功能（一）
吐尔洪江
05-13 1626
前言 Android手写板应该是比较常见的功能了。比如说钉钉的手写签名功能，一些笔记类App的手写记录功能，输入法手写功能等。最近在工作中也遇到了类似的需求，所以打算记录下来。 Android中画板的实现其实并不复杂，目前常用的方法有两种。一是自定义view的方式在canvas上画轨迹，另一个是bitmap画在imageview上。今天就讲一下第一种方式吧。 效果图 界面布局 <RelativeLayout xmlns:android="http://schemas.android.com/apk/
AndroidStudio实现画板的难点及解决方法
05-25
AndroidStudio实现画板的难点主要有以下几个： ...总之，实现画板需要综合运用Android中的Canvas、Paint、GestureDetector等类和接口，需要细心设计和编写代码，才能实现一个功能完备、易用的画板应用。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值