創(chuàng)建一個(gè)類

1.png

在昨天的滑動(dòng)條下面創(chuàng)建畫板和顏色板

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>

創(chuàng)建選擇按鈕

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

創(chuàng)建init方法用于數(shù)組的初始化和背景的設(shè)置

private void init(){
        //初始化數(shù)組
        graphs=new ArrayList<>();
        orginalGraphs=new ArrayList<>();
        setBackgroundColor(Color.WHITE);
    }

創(chuàng)建畫布用于畫圖和數(shù)組的遍歷

@Override
    protected void onDraw(Canvas canvas) {
        //遍歷數(shù)組
        Iterator<Graph> iterator=graphs.iterator();
        while (iterator.hasNext()){
            //從集合中獲取一個(gè)圖形對象
            Graph line=iterator.next();
            //繪制圖形
            canvas.drawPath(line.path,line.paint);
        }
    }

創(chuàng)建touch事件用于圖形的起點(diǎn)和終點(diǎn)設(shè)置還有其余的信息的設(shè)置

@Override
    public boolean onTouchEvent(MotionEvent event) {
        switch (event.getAction()){
            case MotionEvent.ACTION_DOWN:
                //創(chuàng)建當(dāng)前這條線對應(yīng)的Paint和Path
                Paint mpaint=new Paint(Paint.ANTI_ALIAS_FLAG);
                mpaint.setColor(lineColor);
                mpaint.setStrokeWidth(lineSize);
                mpaint.setStyle(Paint.Style.STROKE);

                mpath=new Path();
                //設(shè)置起點(diǎn)
                mpath.moveTo(event.getX(),event.getY());
                //保存當(dāng)前這個(gè)圖形的詳細(xì)信息
                Graph temp=new Graph(mpaint,mpath);
                graphs.add(temp);
                orginalGraphs.add(temp);
                break;
            case MotionEvent.ACTION_MOVE:
                //連接從path終點(diǎn)到當(dāng)前觸摸點(diǎn)的線
                mpath.lineTo(event.getX(),event.getY());
                break;
            case MotionEvent.ACTION_UP:
                break;
        }
        invalidate();
        return true;
    }

創(chuàng)建私有類管理圖像的畫筆和路徑

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

創(chuàng)建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;
    }

選擇按鈕的具體實(shí)現(xiàn)

//刪除最后一個(gè)圖形  撤銷
    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  添加到操作數(shù)組中
            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();
        //設(shè)置線條的顏色和背景相同
        if (drawable!=null) {
            bloadView.setLineColor(drawable.getColor());
        }
    }

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

    }

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

最終結(jié)果

1572785505715.gif