一个简单的涂鸦例子

一个简单的涂鸦例子

版权声明：本文为博主原创文章，未经博主允许不得转载。

今天是个很重要的日子，波哥的博客开通了，此处应该有掌声。。。
今天给大家带来的是一个简单的涂鸦例子，包括撤销、恢复、重做、保存、橡皮擦、画笔颜色调整、画笔尺寸调整，不多说，先上图：

1、首先我们要设置一个画板，让我们能够进行涂鸦

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

2、然后就是我们最重要的开始涂鸦了，主要是我们对触摸屏幕是的操作，使用 quadTo(float x1, float y1, float x2, float y2)进行画线，和进行橡皮擦的操作

        /**
     * 触摸屏幕时操作
     * @param event
     * @return
     */
    @Override
    public boolean onTouchEvent(MotionEvent event) {
        float x = event.getX();
        float y = event.getY();
        switch (event.getAction()){
            case MotionEvent.ACTION_DOWN://按下
                mPath = new Path();
                dp = new DrawPath();
                dp.path = mPath;
                dp.paint = mPaint;
                currentX = x;
                currentY = y;
                mPath.moveTo(currentX, currentY);
                break;
            case MotionEvent.ACTION_MOVE://移动
                //画线
                mPath.quadTo(currentX, currentY, (currentX + x)/2, (currentY + y)/2);
                currentX = x;
                currentY = y;
                break;
            case MotionEvent.ACTION_UP:
                mCanvas.drawPath(dp.path, dp.paint);
                savePath.add(dp);
                dp = null;
                mPath = null;
                break;
        }
        invalidate();
        return true;
    }

3、对画笔进行设置

     /**
     * 设置颜色
     * @param paintColor
     */
    public void setPaintColor(int paintColor) {
        this.paintColor = paintColor;
        setPaint();
    }

    /**
     * 设置大小
     * @param size
     */
    public void setSize(int size) {
        this.size = size;
        setPaint();
    }

    /**
     * 设置画笔
     */
    private void setPaint() {
        mPaint = new Paint();
        mPaint.setAntiAlias(true); // 去除锯齿
        mPaint.setStyle(Paint.Style.STROKE);
        if(isEraser){//是否是橡皮擦
            mPaint.setAlpha(0);
            mPaint.setColor(Color.WHITE);
            mPaint.setStrokeWidth(50);
        } else {
            mPaint.setStrokeWidth(size);
            mPaint.setColor(paintColor);
        }
    }

4、进行撤销，恢复上一步，清楚画板等操作

 /**
 * 撤销
 */
public void undo(){
    if(savePath != null && savePath.size() > 0){
        DrawPath drawPath = savePath.get(savePath.size() - 1);
        deletePath.add(0,drawPath);
        savePath.remove(savePath.size()-1);
    }
    reDraw();
}

/***
 * 恢复上一步
 */
public void recover(){
    if(deletePath != null && deletePath.size() > 0){
        DrawPath drawPath = deletePath.get(0);
        savePath.add(drawPath);
        deletePath.remove(0);
    }
    reDraw();
}

/**
 * 清除画板
 */
public void clear(){
    if(savePath != null && savePath.size() > 0){
        savePath.clear();
    }
    if(deletePath != null && deletePath.size() > 0){
        deletePath.clear();
    }
    reDraw();
}

5、最后我们需要对涂鸦进行保存

     /***
     * 保存图片到本地
     */
    public void saveBitmap(){
        String path = Environment.getExternalStorageDirectory() + File.separator + "graffiti/";
        File file = new File(path);
        if(!file.exists()){
            file.mkdirs();
        }
        String date = new SimpleDateFormat("yyyyMMddHHmmss").format(new Date())+".png";
        path += date;
        File file1 = new File(path);
        FileOutputStream fos = null;
        try {
            fos = new FileOutputStream(file1);
            mBitmap.compress(Bitmap.CompressFormat.PNG, 100, fos);
            fos.close();
        } catch (FileNotFoundException e) {
            e.printStackTrace();
        } catch (IOException e) {
            e.printStackTrace();
        }
    }

6、神马，不是已经对图片进行保存了吗，怎么还有第6步。当然啦，我们还得需要在MainActivity中对GraffitiView进行初始化呀！！！

    private void initGraffiti() {
        DisplayMetrics mDisplayMetrics = new DisplayMetrics();getWindow().getWindowManager().getDefaultDisplay().getMetrics(mDisplayMetrics);
        int screenWidth = mDisplayMetrics.widthPixels;
        int screenHeight = mDisplayMetrics.heightPixels;
        graffitiView = new GraffitiView(this, screenWidth, screenHeight);
        graffiti.addView(graffitiView);
    }

好了，大功告成，我们的涂鸦例子就这样出来了，就问你们怕不怕。
所有的代码都在我的GitHub里面
https://github.com/mianmian520/Graffiti.git