画板——颜色板和按钮

创建一个类

1.png

在昨天的滑动条下面创建画板和颜色板

1.png

创建选择按钮

1.png

所用到的所有全局变量

1.png

创建init方法用于数组的初始化和背景的设置

private void init(){
        //初始化数组
        graphs=new ArrayList<>();
        orginalGraphs=new ArrayList<>();
        setBackgroundColor(Color.WHITE);
    }

创建画布用于画图和数组的遍历

@Override
    protected void onDraw(Canvas canvas) {
        //遍历数组
        Iterator iterator=graphs.iterator();
        while (iterator.hasNext()){
            //从集合中获取一个图形对象
            Graph line=iterator.next();
            //绘制图形
            canvas.drawPath(line.path,line.paint);
        }
    }

创建touch事件用于图形的起点和终点设置还有其余的信息的设置

@Override
    public boolean onTouchEvent(MotionEvent event) {
        switch (event.getAction()){
            case MotionEvent.ACTION_DOWN:
                //创建当前这条线对应的Paint和Path
                Paint mpaint=new Paint(Paint.ANTI_ALIAS_FLAG);
                mpaint.setColor(lineColor);
                mpaint.setStrokeWidth(lineSize);
                mpaint.setStyle(Paint.Style.STROKE);

                mpath=new Path();
                //设置起点
                mpath.moveTo(event.getX(),event.getY());
                //保存当前这个图形的详细信息
                Graph temp=new Graph(mpaint,mpath);
                graphs.add(temp);
                orginalGraphs.add(temp);
                break;
            case MotionEvent.ACTION_MOVE:
                //连接从path终点到当前触摸点的线
                mpath.lineTo(event.getX(),event.getY());
                break;
            case MotionEvent.ACTION_UP:
                break;
        }
        invalidate();
        return true;
    }

创建私有类管理图像的画笔和路径

private class Graph{
        Paint paint;
        Path path;
        public Graph(Paint paint,Path path){
            this.paint=paint;
            this.path=path;
        }
    }

创建set、get方法

public int getLineSize() {
        return lineSize;
    }

    public void setLineSize(int lineSize) {
        this.lineSize = lineSize;
    }

    public int getLineColor() {
        return lineColor;
    }

    public void setLineColor(int lineColor) {
        this.lineColor = lineColor;
    }

选择按钮的具体实现

//删除最后一个图形  撤销
    public void removeLast(){
        if (graphs.size()>0){
            graphs.remove(graphs.size()-1);
            invalidate();
        }
    }

    //删除所有 清空
    public void removeAll(){
        graphs.clear();
        invalidate();
    }

    //还原上一步
    public void lastStep(){
        //判断缓存中是否有
        if (graphs.size()

获取画板

1.png

颜色的选择

public void choiceColor(View view) {
        //获取按钮上面的背景颜色
        ColorDrawable drawable=(ColorDrawable) view.getBackground();
        //获取颜色
        bloadView.setLineColor(drawable.getColor());
    }

选择按钮的获取

//撤销
    public void goBack(View view) {
        bloadView.removeLast();
    }

    //清空
    public void clear(View view) {
        bloadView.removeAll();
    }

    //橡皮擦
    public void eraser(View view) {
        //获取画板的drawable
        ColorDrawable drawable= (ColorDrawable) bloadView.getBackground();
        //设置线条的颜色和背景相同
        if (drawable!=null) {
            bloadView.setLineColor(drawable.getColor());
        }
    }

    //保存
    public void save(View view) {

    }

    //还原
    public void lastStep(View view) {
        bloadView.lastStep();
    }
}

最终结果

1572785505715.gif