Android炫酷画板

293293.jpg

前言：

在上篇文章我介绍了别人写的画板，今天呢要带给大家的是更炫酷的画板实现，写得不好的地方，请见谅~

概述：

• 环境：Android Studio 3.42
• 语言：Java
• 特点：简单，易懂，效果爆炸

展示：

image.png

介绍：

左边是可以滑动小圆点的滑动条，用来改变字体大小，中间是绘画区域，右边是选择颜色的区域，下边有画笔，橡皮擦，撤销，反撤销等操作，这个 demo我用到了今天老师教的知识点和我上篇文章介绍的画板的绘制，除了保存我还没实现，其它都实现了，如果还有小问题，请指出来，我会帮您解答的

项目技术：

进度条和滑动条

• 绘制滑动条

canvas.drawLine(getWidth()/2,0,getWidth()/2,getHeight(),paint);

• 绘制小圆点

 canvas.drawCircle(getWidth()/2,position,radiux,paint1);

• 监听触摸点(改变小圆点圆心的横坐标或者纵坐标实现重绘，也就是小圆点移动效果，其实小圆点的坐标不停改变，画板也在不停的画小圆点)

 @Override
    public boolean onTouchEvent(MotionEvent event) {

        switch (event.getAction()){


            case MotionEvent.ACTION_DOWN:
                if (isHor()){
                    position = event.getY();
                }
                else {
                    position = event.getX();
                }
                break;

            case MotionEvent.ACTION_MOVE:
                if (isHor()){
                    position = event.getY();
                }
                else {
                    position = event.getX();
                }
                break;

            case MotionEvent.ACTION_UP:
                break;

        }
        //重绘，调用onDraw方法
        invalidate();
        return true;
    }

• 绘制进度条，进度条和滑动条大部分一样，不一样的是进度条只显示进度，没有小圆点，和网易云音乐的进度条类似，这里我通过设置当前位置position区分进度条和滑动条，显示出来效果就是当前进度和还没滑动部分颜色不同

 //画进度条
   canvas.drawLine(getWidth()/2,0,getWidth()/2,position,paint2);

• 数据回调

 /**
     * 接口，实现滑动条滑动长度position/滑动条长度的比值的回调
     * */
    public interface OnSliderChangedListener{
        void positionChanged(float p);
    }

    public void addListener(OnSliderChangedListener listener){
        this.listener = listener;
    }

    //数据回调方法
    private void callBack(){
        if (listener != null)
        {
            if (isHor()) {
                listener.positionChanged(position / getHeight());
            }
            else {
                listener.positionChanged(position/getWidth());
            }
        }
    }

演示效果：

image.png

绘画画板

• 触摸事件
  绘制画板比较重要的就是触摸事件，点击会保存按下的位置，滑动会画出曲线，放开会保存路径，在我的上篇文章对这些有完整介绍，大家可以点击这里，Android简单画板实现

@Override
    public boolean onTouchEvent(MotionEvent event) {

        float x =event.getX();
        float y =event.getY();
        switch (event.getAction())

        {
            case MotionEvent.ACTION_DOWN:

                mLastX = x;
                mLastY = y;
                mPath.moveTo(mLastX,mLastY);
                break;
            case MotionEvent.ACTION_MOVE:
                //绘制画出的图形
                mPath.quadTo(mLastX,mLastY,(mLastX+x)/2,(mLastY+y)/2);
                mBufferCanvas.drawPath(mPath,mPaint);
                invalidate();
                mLastX = x;
                mLastY = y;
                break;
            case MotionEvent.ACTION_UP:
                //保存路径
                savePath();
                mPath.reset();
                break;

        }

        return true;
    }

颜色选项

• 颜色选项就是一些布局图片，通过设置点击事件改变画笔颜色
  布局

 <LinearLayout
            android:layout_width="60dp"
            android:layout_height="match_parent"
            android:orientation="vertical">
            <ImageView
                android:id="@+id/iv_one"
                android:layout_width="40dp"
                android:layout_height="40dp"
                android:layout_weight="1"
                android:background="@color/colorBlack"/>
            <ImageView
                android:id="@+id/iv_two"
                android:layout_width="40dp"
                android:layout_height="40dp"
                android:layout_weight="1"
                android:background="@color/colorAccent"/>
            <ImageView
                android:id="@+id/iv_three"
                android:layout_width="40dp"
                android:layout_height="40dp"
                android:layout_weight="1"
                android:background="@color/colorPrimary"/>
            <ImageView
                android:id="@+id/iv_four"
                android:layout_width="40dp"
                android:layout_height="40dp"
                android:layout_weight="1"
                android:background="@color/colorRed"/>
        </LinearLayout>

点击

 @Override
    public void onClick(View view) {
        switch (view.getId()){
            case R.id.iv_one:
                mDrawingBoard.setmPaintColor(Color.BLACK);
                break;
            case R.id.iv_two:
                mDrawingBoard.setmPaintColor(Color.parseColor("#D81B60"));

                break;
            case R.id.iv_three:
                mDrawingBoard.setmPaintColor(Color.parseColor("#008577"));
                break;
            case R.id.iv_four:
                mDrawingBoard.setmPaintColor(Color.RED);
                break;

其它功能

• 橡皮擦
  设置画笔模式为橡皮擦模式

//设置画笔模式
   public void setMode(DrawMode mode){
        if (mode != mDrawMode){
            if (mode == DrawMode.EraserMode){
                //橡皮擦模式
                mPaint.setStrokeWidth(mEraseSize);
//图像混合模式为清除，实现橡皮擦功能
                mPaint.setXfermode(mEraserMode);
                mPaint.setColor(mCanvasColor);
            }
            else {
                //画笔模式
                mPaint.setStrokeWidth(mPaintSize);
                mPaint.setXfermode(null);
                mPaint.setColor(mPaintColor);
            }
        }
        mDrawMode = mode;
   }

• 撤销

/**
     * 上一步 撤销
     * */
    public void lastStep(){
        if (currPaths != savePaths)
        {
            if (savePaths.size()>currPaths.size()){
                currPaths.add(savePaths.get(savePaths.size()-1));
                reDrawBitmap();
            }
        }
    }

总结：这个demo收获很大，当然过程也不容易，需要一步一步来，感谢大家阅读，写的不好的地方请见谅~
源码,点击这里[提取码: kpxs 复制这段内容后打开百度网盘手机App，操作更方便哦]