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，操作更方便哦]
网友评论