Android的学习与实践13(画板(另外一部分))

1.收获

今天的主要任务就是接着昨天没有完成的画板,昨天我们实现了旁边的进度条,今天我们需要将这个进度条改为可以改变画笔的大小的工具,我们在旁边设置了颜色,通过按钮来实现画笔颜色的切换,我们还在下方添加了撤销,清空,橡皮擦,上一步,保存的功能,使得这个画板更加与真正的画板接近。在这些功能中,并没有什么好多的新知识,都是以前学过的东西,只不过有些忘记了,通过这个项目我们有复习了以前学过的东西。这个 项目是我们第二次写的比较大(对于现在的我来说)的项目,并且这个还是比较实用的,因为在我们生活在还可以直接有的,不管怎样这一切为了什么自己是最清楚的。

2.技术

(1)界面布局以及操作的实现
(2)画板的操作
(3)画画结果的操作

3.技术的应用和实践

(1)界面布局以及操作的实现
首先我们要先确定这个界面需要哪些空间或者容器,而我们需要滑动条,画板,调色区,操作区

image.png

而且在滑动条,画板,调色区这三个需要用相对布局来约束






1.滑动条的布局
首先我们想到让滑动条位于屏幕的左边,并且要随着屏幕的转动而转动。所以我们需要对滑动条进行操作,并且滑动条,画板,调色区这三者在同一个布局中(在xml文件中进行操作)


    

效果:

image.png

2.画板的布局
在布局画板之前我们想到了我们需要他两边的控件的位置,所以我们先对调色区域进行布局并且要随着屏幕的转动而转动。并且我们需要对他进行添加id以方便在后面去寻找它,来画画


        

效果:
image.png

3.调色区域的布局
我们想到让滑动条位于屏幕的右边,并且要随着屏幕的转动而转动。由于我们需要对他进行操作,搜易我们给每一个的调色区域添加了一个点击事件 android:onClick="choicecolor",我们要在mainActivity中去实现它

  
        

            

android:onClick="choicecolor"方法的实现,由于我们点击这个按钮,就需要画笔改变到这种颜色,所以我们需要去读取这个区域的颜色,并将画笔设置为当前颜色

//选择颜色  获取按钮上面的颜色
    public void choicecolor(View view) {
        //获取按钮上面的颜色
       Drawable drawable=view.getBackground();
       //获取颜色
       drawboardview.setLinecolor (((ColorDrawable) drawable).getColor());
    }

效果:


image.png

4.操作的布局
在操作栏我们只需要对他进行一个布局,添加上几个操作按钮就可以了,按钮的布局为线性布局,给每一个按钮添加一个点击事件,并在我们要在mainActivity中去实现它

 
        

各部分按钮的操作实现的函数

 //撤销
    public void goBack(View view) {
       
    }

    //清空
    public void clear(View view) {
        
    }

    //橡皮擦
    public void eraser(View view) {
     
    }

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

    //上一步 还原
    public void lastStep(View view) {
     
    }

我们的布局和一些操作就是这样,接下来的就需要我们去实现对画板的一些操作
(2)画板的操作
我们需要对画板进行一些操作
1.我们对画板属性的定义
a.画板背景

  //设置画板背景
        setBackgroundColor(Color.WHITE);

b.画笔属性(颜色,粗细)
我们默认的画笔颜色是黑色,粗细为5

private int Linecolor= Color.BLACK;
    private int Linesize=5;

在这里我们需要将画笔大小域前面的滑动条相关联,我们按照画笔的最大为

private int max=100;//设置最大值

按照这个比例和那个滑动条长度的比例进行搭配
我们要一个监听者来监听滑动条的改变

//滑动改变的监听者
    private OnSliderChangeListener onSliderChangeListener;
//得到改变后的大小 
 private  void callback(){
        if(onSliderChangeListener!=null){
            if(getHeight()>getWidth()){
                progress=position/getHeight();
            }else{
                progress=position/getWidth();
            }
            onSliderChangeListener.progresschange(progress*max);
        }
    }

然后我们对滑动条添加的事件,当监听者监听到有事件发生时去得到改变后的值

@Override
    public boolean onTouchEvent(MotionEvent event) {
        switch (event.getAction()){
            case MotionEvent.ACTION_DOWN:
                //小圆点放大
                thumScale=2;
                if(getHeight()getWidth()){
                        position=getWidth();
                    }
                }else{
                    //纵向时
                    position=event.getY();
                    if(position<0){
                        position=0;
                    }else if(position>getHeight()){
                        position=getHeight();
                    }
                }
                callback();
                break;
            case MotionEvent.ACTION_UP:
                thumScale=4;
                break;
        }
        if(style==SLIDER){
            invalidate();//重新绘制
        }

        return true;
    }

这时我们需要重新设置改变后的值

 //获取画板视图对象
        drawboardview=findViewById(R.id.board);
        slider.setProgress(drawboardview.getLinesize());
        slider.setOnSliderChangeListener(new Slider.OnSliderChangeListener() {
            @Override
            public void progresschange(float progress) {
                //滑动条的进度值设置为线条的宽度
                drawboardview.setLinesize((int) progress);
            }
        });

在画板里面我们设置了两个数组,这两个数组是用来存放我们的画画的结果,一便于对于一些对画画结果的操作

 private ArrayList graphs;//操作数组
    private ArrayList orginalgraphs;//原始数组

添加事件,在我们画的过程中我们将我们画的结果存入这两个数组中

 @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;
    }

(3)画画结果的操作
我们画完后总有一些不如意,所以我们添加了一些操作
1.撤销

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

2.清空

    //清空
    public void clear(View view) {
        drawboardview.removeall();
    }

3.橡皮擦
橡皮擦的原理就是我们通过设置画笔的颜色域画板颜色一样

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

4.上一步

    //上一步 还原
    public void lastStep(View view) {
        drawboardview.returnToLastStep();
    }

上一步,清空,清空的具体操作我们是在画板类里面完成的

//删除最后一个图形
    public  void removeLast(){
        if(graphs.size()>0){
            graphs.remove(graphs.size()-1);
            postInvalidate();
        }
    }
    //删除所有 清空
    public void removeall(){
        graphs.clear();
        postInvalidate();
    }
    //还原上一步
    public void returnToLastStep(){
        //判断缓存中有
        if(graphs.size()

你可能感兴趣的:(Android的学习与实践13(画板(另外一部分)))