实现:画笔颜色选择,滑动调节画笔粗细,随意涂鸦,直线,矩形,圆,擦除;
效果展示图:
主要运用canvas和Paint
功能一:画笔的颜色选择
选择几个颜色,寻找对应的代码,并设为按钮
private void showColorPickerDialog() {
AlertDialog.Builder builder = new AlertDialog.Builder(this);
LayoutInflater inflater = this.getLayoutInflater();
View dialogView = inflater.inflate(R.layout.color_picker_dialog, null);
tv_stroke=dialogView.findViewById(R.id.tv_stroke);
builder.setView(dialogView);
AlertDialog dialog = builder.create();
// 颜色按钮的点击事件
dialogView.findViewById(R.id.colorRed).setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
// 设置画笔颜色为红色
drawingView.setPaintColor(Color.RED);
dialog.dismiss();
}
});
dialogView.findViewById(R.id.colorBlue).setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
// 设置画笔颜色为蓝色
drawingView.setPaintColor(Color.BLUE);
dialog.dismiss();
}
});
// 更多颜色按钮的事件
dialogView.findViewById(R.id.colorGreen).setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
// 设置画笔颜色为蓝色
drawingView.setPaintColor(Color.GREEN);
dialog.dismiss();
}
});
dialogView.findViewById(R.id.colorGreen).setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
// 设置画笔颜色为绿色
drawingView.setPaintColor(Color.GREEN);
dialog.dismiss();
}
});
dialogView.findViewById(R.id.colorGray).setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
// 设置画笔颜色为绿色
drawingView.setPaintColor(Color.GRAY);
dialog.dismiss();
}
});
dialog.show();
}
public void setPaintColor(int newColor) {
invalidate();
paintColor = newColor;
drawPaint.setColor(paintColor);
}
功能二:滑动调节画笔粗细
创建seekbar,将对应按钮与当前视图绑定
SeekBar sb_stroke = dialogView.findViewById(R.id.sb_stroke);
sb_stroke.setProgress(5); //进度条初始大小值为5
sb_stroke.setMax(30);
sb_stroke.setMin(1);
sb_stroke.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener(){
@Override
public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
drawingView.setStroke(progress);
tv_stroke.setText("画笔粗度为:"+progress);
// dialog.dismiss();
}
@Override
public void onStartTrackingTouch(SeekBar seekBar) {
}
@Override
public void onStopTrackingTouch(SeekBar seekBar) {
}
});
功能三,四,五,六:随意涂鸦,直线,矩形,圆形
随意涂鸦:简单来说就说很多段直线,在触碰移动过程中始终画直线;
直线:记录触碰的首末位置,画一条线
矩形:画四条直线,一开始结点为始画两条,以终止结点为始画两条
圆形:调用canvas下的drawCircle方法,将圆心(x,y),半径传入即可;
@Override
public boolean onTouchEvent(MotionEvent event) {
switch (currentMode) {
case PEN:
// 处理签字笔逻辑
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
drawPath.moveTo(event.getX(), event.getY());
break;
case MotionEvent.ACTION_MOVE:
drawPath.lineTo(event.getX(), event.getY());
break;
case MotionEvent.ACTION_UP:
drawCanvas.drawPath(drawPath, drawPaint);
drawPath.reset();
break;
default:
return false;
}
break;
case LINE:
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
startx = event.getX();
starty = event.getY();
drawPath.moveTo(startx, starty);
break;
case MotionEvent.ACTION_UP:
endx = event.getX();
endy = event.getY();
drawPath.lineTo(endx, endy);
drawCanvas.drawPath(drawPath, drawPaint);
drawPath.reset();
break;
default:
return false;
}
// 处理直线绘制逻辑
break;
case RECTANGLE:
// 处理矩形绘制逻辑
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
startx = event.getX();
starty = event.getY();
drawPath.moveTo(startx, starty);
drawPath123.moveTo(startx, starty);
System.out.println(startx + " " + starty);
break;
case MotionEvent.ACTION_UP:
endx = event.getX();
endy = event.getY();
System.out.println(endx + " " + endy);
drawPath12.moveTo(endx, endy);
drawPath1234.moveTo(endx, endy);
drawPath.lineTo(startx, endy);
drawPath12.lineTo(startx, endy);
drawPath1234.lineTo(endx, starty);
drawCanvas.drawPath(drawPath, drawPaint);
drawPath123.lineTo(endx, starty);
drawCanvas.drawPath(drawPath123, drawPaint);
drawCanvas.drawPath(drawPath12, drawPaint);
drawCanvas.drawPath(drawPath1234, drawPaint);
drawPath.reset();
break;
default:
return false;
}
break;
case CIRCLE:
// 处理圆形绘制逻辑
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
startx = event.getX();
starty = event.getY();
case MotionEvent.ACTION_UP:
endx = event.getX();
endy = event.getY();
drawCanvas.drawCircle((endx + startx) / 2, (endy + starty) / 2, (float) Math.sqrt(Math.pow(endx - startx, 2) + Math.pow(endy - starty, 2)) / 2, drawPaint);
break;
default:
return false;
}
break;
}
invalidate();//属性view的,便于看到新的东西
return true;
}
功能七:擦除
简单来说就是随意涂鸦的逻辑,只是将画笔颜色设为白色,调的相对粗一点,即可
case ERASER:
drawPaint.setColor(Color.WHITE);
drawPaint.setStrokeWidth(30);
// 处理橡皮擦逻辑
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
startx = event.getX();
starty = event.getY();
case MotionEvent.ACTION_MOVE:
drawPath.lineTo(event.getX(), event.getY());
break;
case MotionEvent.ACTION_UP:
drawCanvas.drawPath(drawPath, drawPaint);
drawPath.reset();
break;
default:
return false;
}
ath.lineTo(event.getX(), event.getY());
break;
case MotionEvent.ACTION_UP:
drawCanvas.drawPath(drawPath, drawPaint);
drawPath.reset();
break;
default:
return false;
}