android 使用Path实现涂鸦效果

今天周五了,感觉时间过的好快,这周真是过的太闲了,只好继续我的博客之旅了,今天实现一个涂鸦效果,会分几步实现,这里有一个重要的知识点就是图层,要理解这个,不然你看这篇博客,很迷茫,迷茫的苍茫的天涯是我的爱,先从简单的需求做起,绘制一条线,代码如下：

package com.tuya;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.Path;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;
/**
 * Created by admin on 2016/12/16.
 */
public class GraffitiView extends View{private Paint paint;
    private Path path;
    private float downX,downY;
    private float tempX,tempY;
    public GraffitiView(Context context) {this(context,null);
    }public GraffitiView(Context context, AttributeSet attrs) {this(context, attrs,0);
    }public GraffitiView(Context context, AttributeSet attrs, int defStyleAttr) {super(context, attrs, defStyleAttr);
        init();
    }private void init() {paint = new Paint();
        paint.setAntiAlias(true);
        paint.setStrokeWidth(10);
        paint.setStyle(Paint.Style.STROKE);
        path = new Path();
    }@Override
    protected void onDraw(Canvas canvas) {super.onDraw(canvas);
        if(path!=null){canvas.drawPath(path,paint);
        }}@Override
    public boolean onTouchEvent(MotionEvent event) {switch (event.getAction()){case MotionEvent.ACTION_DOWN:downX = event.getX();
                downY = event.getY();
                path.moveTo(downX,downY);
                invalidate();
                tempX = downX;
                tempY = downY;
                break;
            case MotionEvent.ACTION_MOVE:float moveX = event.getX();
                float moveY = event.getY();
                path.quadTo(tempX,tempY,moveX,moveY);
                invalidate();
                tempX = moveX;
                tempY = moveY;
                break;
        }return true;
    }
}

效果：

如果你不使用path的quadTo()用lineTo()方法也行,但是没有使用queadTo()绘制出来的路径光滑,这5条路径是怎么绘制到屏幕上去的呢?上面说了图层的概念,如果不懂,可以去看下我之前写的关于canvas博客,也可以去网上看其他的博客,

我们知道每次canvas.draw...()其实都会产生新的图层,只是图层是透明的,最后隐射到画布(canvas)上,画布分析：

现在来了一个新需求,就是有一个撤销的功能,要实现撤销功能,你得记录会所绘制的path,那我们用集合去记录下每次绘制的path路径,撤销就是把最近的一个path从集合中移除,然后再把其他path绘制上去

代码如下：

package com.tuya;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.Path;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;
import java.util.ArrayList;
import java.util.List;
/**
 * Created by admin on 2016/12/16.
 */
public class GraffitiView extends View{private Paint paint;
    private Path path;
    private float downX,downY;
    private float tempX,tempY;
    private List<DrawPath> drawPathList;
    public GraffitiView(Context context) {this(context,null);
    }public GraffitiView(Context context, AttributeSet attrs) {this(context, attrs,0);
    }public GraffitiView(Context context, AttributeSet attrs, int defStyleAttr) {super(context, attrs, defStyleAttr);
        drawPathList = new ArrayList<>();
        initPaint();
    }private void initPaint() {paint = new Paint();
        paint.setAntiAlias(true);
        paint.setStrokeWidth(10);
        paint.setStyle(Paint.Style.STROKE);
    }@Override
    protected void onDraw(Canvas canvas) {super.onDraw(canvas);
       if(drawPathList!=null&&!drawPathList.isEmpty()){for(DrawPath drawPath:drawPathList){if(drawPath.path!=null){canvas.drawPath(drawPath.path,drawPath.paint);
               }}}}@Override
    public boolean onTouchEvent(MotionEvent event) {switch (event.getAction()){case MotionEvent.ACTION_DOWN:downX = event.getX();
                downY = event.getY();
                path = new Path();//每次手指下去都是一条新的路径
                path.moveTo(downX,downY);
                DrawPath drawPath = new DrawPath();
                drawPath.paint = paint;
                drawPath.path = path;
                drawPathList.add(drawPath);
                invalidate();
                tempX = downX;
                tempY = downY;
                break;
            case MotionEvent.ACTION_MOVE:float moveX = event.getX();
                float moveY = event.getY();
                path.quadTo(tempX,tempY,moveX,moveY);
                invalidate();
                tempX = moveX;
                tempY = moveY;
                break;
            case MotionEvent.ACTION_UP:initPaint();//每次手指抬起都要重置下画笔,不然画笔会保存了之前的设置什么画笔的属性会引起bug
                break;
        }return true;
    }public void undo() {if(drawPathList!=null&&drawPathList.size()>=1){drawPathList.remove(drawPathList.size()-1);
            invalidate();
        }}/**
     * 封装一条路径
     */
    class  DrawPath{Path path;
        Paint paint;
    }
}

效果图：

产品狗静静的走在你跟前说,添加个反撤销功能吧,然后走了,于是默默的又要添加功能,还好这不改之前的代码,只是需要记录下之前从集合中移除的path即可,

思路:用集合把之前删除的path缓存起来,反撤销功能就是把之前的path添加进去然后重新绘制即可,代码实现

关键代码：

/**
 * 撤销功能
 */
public void undo() {if(drawPathList!=null&&drawPathList.size()>=1){savePathList.add(drawPathList.get(drawPathList.size()-1));
        drawPathList.remove(drawPathList.size()-1);
        invalidate();
    }
}
/**
 * 反撤销功能
 */
public void reundo() {if(savePathList!=null&&!savePathList.isEmpty()){drawPathList.add(savePathList.get(savePathList.size()-1));
        savePathList.remove(savePathList.size()-1);
        invalidate();
    }
}

效果图：

心想做好了,等测试吧,这个时候产品狗过来笑嘻嘻的挺牛逼的,这么快就做出来了,然后说如果每次绘制都是黑色,是不是太单调,给用户几个颜色选择吧,这样总比一个黑色好,心想尼玛,有病吧,怎么需求不一下子说好,但是又没办法,只好去实现了,这个也不难,心想算了,其实只要改变画笔的颜色就可以实现了,

很简单的一段代码处理就ok

/**
 * 改变画笔颜色
 * @param color
 */
public void resetPaintColor(int color) {paint.setColor(color);
}

效果：

现在产品狗说画笔的宽度能不能让用户自己去调试啊,不要给死了,这个时候估计你就直接把产品狗干死,奈何,产品狗是警察学校毕业的,只要擦干眼泪,默默的去撸码了,所以说程序员要经常锻炼,不然你会被产品狗干死的,

/**
 * 放大就是改变画笔的宽度
 */
public void resetPaintWidth() {paintWidth+=2;
    paint.setStrokeWidth(paintWidth);
}

效果：

产品看你很来事,又叫你实现一歌橡皮擦的功能,现在绘制了后如果不想要就只能撤销了不能擦除什么的,其实实现橡皮擦功能很简单

/**
 * 橡皮擦功能 把画笔的颜色和view的背景颜色一样就ok,然后把画笔的宽度变大了,擦除的时候显得擦除范围大点
 */
public void eraser() {paint.setColor(Color.parseColor("#CDC0B0"));//这是view背景的颜色
    paint.setStrokeWidth(paintWidth+6);
}

效果：

好了,简单的涂鸦功能算实现了!

github:https://github.com/zhouguizhi/SimpleGraffiti

android 使用Path实现涂鸦效果相关推荐

android涂鸦板保存功能,Android 使用Path实现涂鸦功能
今天实现一个涂鸦效果,会分几步实现,这里有一个重要的知识点就是图层,要理解这个,不然你看这篇博客,很迷茫,迷茫的苍茫的天涯是我的爱,先从简单的需求做起,绘制一条线,代码如下: package com. ...
android绘制view的撤销,DrawingView android 上的一个涂鸦控件。可以设置画笔的粗细，颜色，撤销上一笔涂鸦，提供保存图片的接口。 @codeKK Android开源站...
DrawingView 的原型来自DrawingView-Android,是 android 的一个可涂鸦控件. 之所以做这个控件是因为前段时间写了一个截图应用需要用到涂鸦功能,现在把涂鸦的控件单独拿 ...
Android实现手写板和涂鸦功能
下面仿一个Android手写板和涂鸦的功能,直接上代码: write_pad.xml <LinearLayout xmlns:android="http://schemas.andro ...
50个Android开发人员必备UI效果源码[转载]
Android 仿微信之主页面实现篇 Android 仿微信之界面导航篇 Android 高仿QQ 好友分组列表 Android 高仿QQ 界面滑动效果 Android 高仿QQ 登陆界面 Andro ...
android+ebook控件,Android 自定义控件 eBook 翻书效果
Book.java文件: package com.book; import Android.app.Activity; import android.os.Bundle; import android ...
50个Android开发人员必备UI效果源码
2019独角兽企业重金招聘Python工程师标准>>> Android 仿微信之主页面实现篇 Android 仿微信之界面导航篇 Android 高仿QQ 好友分组列表 Androi ...
android动态波浪效果,android贝塞尔曲线实现波浪效果
本文实例为大家分享了android贝塞尔曲线实现波浪效果的具体代码,供大家参考,具体内容如下因为手机录制gif不知道下什么软件好,所以暂时就先忽略效果图了我在屏幕外多画了1.5个波浪,延伸至屏幕内 ...
android炫酷的动画效果
这段时间看到一些比较好看的android动画效果,下面我就给大家一些我比较喜欢的动画效果,并附上源码希望对你们有用处. 1.很简单却很酷的粒子破碎效果介绍: 实现思路 1.新建一个 Bean Pa ...
Android 登录3D翻转动画效果
Android 登录3D翻转动画效果描述:这是一个登录3D翻转效果的Demo. 项目代码在最后面!!!!跳转到最后控件效果如下: 实现功能: 使页面进行3D翻转(3D翻转效果) 可通过回调监听两 ...

android 使用Path实现涂鸦效果

android 使用Path实现涂鸦效果相关推荐

最新文章

热门文章