创建一个类

1.png

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

1.png

<!--画板-->
        <swu.lwk.a16draw_point.DrawBloadView
            android:id="@+id/board"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            app:layout_constraintLeft_toRightOf="@id/slider"
            app:layout_constraintRight_toLeftOf="@id/color"/>

        <!--颜色板-->
        <LinearLayout
            android:id="@+id/color"
            android:layout_width="60dp"
            android:layout_height="match_parent"
            android:orientation="vertical"
            android:layout_marginRight="10dp"
            app:layout_constraintRight_toRightOf="parent"
            android:gravity="center">

            <Button
                android:layout_width="match_parent"
                android:layout_height="50dp"
                android:background="@color/colorAccent"
                android:onClick="choiceColor"/>
            <Button
                android:layout_width="match_parent"
                android:layout_height="50dp"
                android:background="#000"
                android:onClick="choiceColor"/>
            <Button
                android:layout_width="match_parent"
                android:layout_height="50dp"
                android:background="@color/colorPrimaryDark"
                android:onClick="choiceColor"/>
            <Button
                android:layout_width="match_parent"
                android:layout_height="50dp"
                android:background="@color/colorPrimary"
                android:onClick="choiceColor"/>
            <Button
                android:layout_width="match_parent"
                android:layout_height="50dp"
                android:background="#080888"
                android:onClick="choiceColor"/>

        </LinearLayout>

创建选择按钮

1.png

<Button
            android:layout_width="80dp"
            android:layout_height="wrap_content"
            android:text="撤销"
            android:onClick="goBack"/>
        <Button
            android:layout_width="80dp"
            android:layout_height="wrap_content"
            android:text="清空"
            android:onClick="clear"/>
        <Button
            android:layout_width="80dp"
            android:layout_height="wrap_content"
            android:text="橡皮擦"
            android:onClick="eraser"/>
        <Button
            android:layout_width="80dp"
            android:layout_height="wrap_content"
            android:text="上一步"
            android:onClick="lastStep"/>
        <Button
            android:layout_width="80dp"
            android:layout_height="wrap_content"
            android:text="保存"
            android:onClick="save"/>

所用到的所有全局变量

1.png

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

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

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

@Override
    protected void onDraw(Canvas canvas) {
        //遍历数组
        Iterator<Graph> 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()<orginalGraphs.size()){
            //获取上一步的索引值
            int index=graphs.size()-1+1;
            //从缓存中获取index  添加到操作数组中
            graphs.add(orginalGraphs.get(index));
            //刷新
            invalidate();
        }
    }

获取画板

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