自己定义控件-画板，橡皮擦，刮刮乐
Posted brucemengbm
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了自己定义控件-画板，橡皮擦，刮刮乐相关的知识，希望对你有一定的参考价值。
画板效果图
页面代码
public class ActionerView extends View {
private Paint mPaint = new Paint();
private Path mPath = new Path();//手指滑动路径
private Canvas mCanvas;//缓存画布
private Bitmap mBitmap;//缓存图片
private float pointX, pointY;//触点坐标
public ActionerView(Context context, AttributeSet attrs) {
super(context, attrs);
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
int width = getMeasuredWidth();
int height = getMeasuredHeight();
initPaint();//初始化画笔
mBitmap = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);
mCanvas = new Canvas(mBitmap);
}
@Override
public void draw(Canvas canvas) {
super.draw(canvas);
mCanvas.drawPath(mPath, mPaint);
canvas.drawBitmap(mBitmap, 0, 0, null);
}
@Override
public boolean onTouchEvent(MotionEvent event) {
pointX = event.getX();
pointY = event.getY();
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
mPath.moveTo(pointX, pointY);//将路径移动到点(pointX, pointY)，不绘制
break;
case MotionEvent.ACTION_MOVE:
mPath.lineTo(pointX, pointY);//绘制一条从上个触点到点(pointX, pointY)的线条
break;
}
invalidate();//又一次画图
return true;
}
private void initPaint() {//初始化画笔
mPaint.setDither(true);//图片抖动处理
mPaint.setAntiAlias(true);
mPaint.setStrokeWidth(20);
mPaint.setStyle(Paint.Style.STROKE);
mPaint.setStrokeCap(Paint.Cap.ROUND);//设置笔头为圆角
mPaint.setStrokeJoin(Paint.Join.ROUND);
}
}橡皮擦效果图
页面代码
public class ActionView extends View {
private Paint mPaint = new Paint();
private Path mPath = new Path();//手指滑动路径
private Canvas mCanvas;//缓存画布
private Bitmap mBitmap;//缓存图片
private float pointX, pointY;//触点坐标
public ActionView(Context context, AttributeSet attrs) {
super(context, attrs);
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
int width = getMeasuredWidth();
int height = getMeasuredHeight();
initPaint();//初始化画笔
mBitmap = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888); //初始化Bitmap
mCanvas = new Canvas(mBitmap);
mCanvas.drawColor(Color.parseColor("#c0c0c0"));//设置画板背景
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
Bitmap mBackBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.bg);
canvas.drawBitmap(mBackBitmap, 0, 0, null);
mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_OUT));
mCanvas.drawPath(mPath, mPaint);
canvas.drawBitmap(mBitmap, 0, 0, null);
}
@Override
public boolean onTouchEvent(MotionEvent event) {
pointX = event.getX();
pointY = event.getY();
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
mPath.moveTo(pointX, pointY);//将路径移动到点(pointX, pointY)。不绘制
break;
case MotionEvent.ACTION_MOVE:
mPath.lineTo(pointX, pointY);//绘制一条从上个触点到点(pointX, pointY)的线条
break;
}
invalidate();//又一次画图
return true;
}
private void initPaint() {//初始化画笔
mPaint.setDither(true);//设定是否使用图像抖动处理。会使绘制出来的图片颜色更加平滑和饱满，图像更加清晰
mPaint.setAntiAlias(true);//设置抗锯齿
mPaint.setStrokeWidth(30);
mPaint.setColor(Color.RED);//设置画笔颜色
mPaint.setStyle(Paint.Style.STROKE);
mPaint.setStrokeCap(Paint.Cap.ROUND);
mPaint.setStrokeJoin(Paint.Join.ROUND);//圆角
mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST));
}
}刮刮乐效果图
页面代码
public class ActionersView extends View {
private Paint mPaint = new Paint();
private Paint txtPaint = new Paint();//文字画笔
private Path mPath = new Path();//手指滑动路径
private Canvas mCanvas;//缓存画布
private Bitmap mBitmap;//缓存图片
private float pointX, pointY;//触点坐标
private String txtStr = "￥5,000,000";
public ActionersView(Context context, AttributeSet attrs) {
super(context, attrs);
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
int width = getMeasuredWidth();
int height = getMeasuredHeight();
mBitmap = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888); // 初始化bitmap
mCanvas = new Canvas(mBitmap);
initPaint();//初始化画笔
// mCanvas.drawRoundRect(new RectF(100, 500, width - 100, height - 500), 30, 30, mPaint);//效果一：背景为灰色的矩形
mCanvas.drawBitmap(BitmapFactory.decodeResource(getResources(), R.drawable.bg1), null, new RectF(100, 500, width - 100, height - 500), null);//效果二：背景为图片
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
txtPaint.setTextSize(60);
canvas.drawText(txtStr, getWidth() / 2 - 150, getHeight() / 2, txtPaint);
mCanvas.drawPath(mPath, mPaint);
canvas.drawBitmap(mBitmap, 0, 0, null);
}
@Override
public boolean onTouchEvent(MotionEvent event) {
pointX = event.getX();
pointY = event.getY();
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
mPath.moveTo(pointX, pointY);//将路径移动到点(pointX, pointY)，不绘制
break;
case MotionEvent.ACTION_MOVE:
mPath.lineTo(pointX, pointY);//绘制一条从上个触点到点(pointX, pointY)的线条
break;
}
invalidate();//又一次画图
return true;
}
private void initPaint() {//初始化画笔
mPaint.setDither(true);
mPaint.setAntiAlias(true);
mPaint.setStrokeWidth(30);
mPaint.setStyle(Paint.Style.STROKE);
mPaint.setStrokeCap(Paint.Cap.ROUND);
mPaint.setStrokeJoin(Paint.Join.ROUND);
mPaint.setColor(Color.parseColor("#c0c0c0"));
mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_OUT));
}
}附：Xfermode的效果
以上是关于自己定义控件-画板，橡皮擦，刮刮乐的主要内容，如果未能解决你的问题，请参考以下文章
canvas画板绘图 矩形 圆形 椭圆 自定义多边形 画笔/铅笔 曲线 橡皮擦