最近项目中遇到了个新需求，要求在图片上能够绘制不同的图标，文字，和轨迹。原生ImageView无法满足要求只能自己实现一个了。
在开始之前先想了一下需要用到的功能，要求是能在显示的图片上绘制图标，文字和自由“涂鸦”，所以，Imageview要重写onTouchEvent (MotionEvent event)和onDraw (Canvas canvas) 。在onTouchEvent (MotionEvent event) 中首先判断当前操作是要绘制图片、文字、轨迹中的哪一种，然后在MotionEvent.ACTION_DOWN、MotionEvent.ACTION_MOVE以及MotionEvent.ACTION_UP中实现需要的效果。最后调用 postInvalidate()实现重绘，将内容绘制到屏幕上。
开始的时候由于考虑不够周全，在onTouchEvent (MotionEvent event)中设置好各项条件后，在方法最后调用postInvalidate()实现重绘，然后在方法onDraw (Canvas canvas)中绘制各个效果。结果是本次绘制会将上一次的覆盖掉。多次尝试后，找到了一个解决方法。创建一个空的Canvas ，然后在根据所显示图片的宽高创建一个空白的Bitmap，并将创建的空白Bitmap通过canvas.setBitmap( Bitmap bitmap)设置给空的canvas。这样，以后的绘制图标和文字的内容都先绘制在空canvas上，在重绘的时候将绘制了内容的“空白”bitmap通过onDraw (Canvas canvas)中的 canvas.drawBitmap (cacheBitmap, 0, 0, null)绘制到屏幕上，就达到了需求的效果。
下面是完整代码：
import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.Path;
import android.support.v7.widget.AppCompatImageView;
import android.util.AttributeSet;
import android.view.MotionEvent;
public class DrawImageView extends AppCompatImageView {
//需要绘制的样式
private int MODE = -1;
public Paint mPaint;
//轨迹的path
private Path mPath;
//文字的内容
private String mContent;
//绘制的图标
private Bitmap mIcon;
//手指点下的位置
private float mPreX;
private float mPreY;
public Bitmap mCacheBitmap;
public Canvas mCacheCanvas;
public DrawImageView (Context context, AttributeSet attrs) {
super (context, attrs);
init ();
}
private void init () {
mPaint = new Paint ();
mPaint.setAntiAlias (true);
mPath = new Path ();
mCacheCanvas = new Canvas ();
}
//设置当前的绘制模式
public void mode (int mode) {
MODE = mode;
}
//设置绘制的文字内容、大小和画笔样式
public void setTextStyle (String content, int color, int textSize, Paint.Style paintStyle) {
mContent = content;
mPaint.setColor (color);
mPaint.setStyle (paintStyle);
mPaint.setTextSize (textSize);
}
//设置轨迹的颜色和宽度
public void setLineStyle (int color, int lineWidth,Paint.Style paintStyle) {
mPaint.setStyle (paintStyle);
mPaint.setStrokeWidth (lineWidth);
mPaint.setColor (color);
}
//设置需要绘制的图标
public void setIcon (Bitmap icon) {
mIcon = icon;
}
@Override
public boolean onTouchEvent (MotionEvent event) {
switch (MODE) {
case 0://文字
switch (event.getAction ()) {
case MotionEvent.ACTION_DOWN:
mPreX = event.getX ();
mPreY = event.getY ();
return true;
case MotionEvent.ACTION_UP:
mCacheCanvas.drawText (mContent, mPreX, mPreY, mPaint);
break;
}
break;
case 1://图标
switch (event.getAction ()) {
case MotionEvent.ACTION_DOWN:
mPreX = event.getX ();
mPreY = event.getY ();
return true;
case MotionEvent.ACTION_UP:
mCacheCanvas.drawBitmap (mIcon, mPreX, mPreY, mPaint);
break;
}
break;
case 2://手指轨迹
switch (event.getAction ()) {
case MotionEvent.ACTION_DOWN:
mPreX = event.getX ();
mPreY = event.getY ();
mPath.moveTo (mPreX, mPreY);
return true;
case MotionEvent.ACTION_MOVE:
float endX = (mPreX + event.getX ()) / 2;
float endY = (mPreY + event.getY ()) / 2;
mPath.quadTo (mPreX, mPreY, endX, endY);
mPreX = event.getX ();
mPreY = event.getY ();
break;
case MotionEvent.ACTION_UP:
mCacheCanvas.drawPath (mPath, mPaint);
mPath.reset ();
break;
}
break;
}
postInvalidate ();
return super.onTouchEvent (event);
}
@Override
protected void onDraw (Canvas canvas) {
super.onDraw (canvas);
if (mCacheBitmap != null)
canvas.drawBitmap (mCacheBitmap, 0, 0, null);
if (!mPath.isEmpty ())
canvas.drawPath (mPath, mPaint);
}
}
在代码中使用
public class MainActivity extends AppCompatActivity {
private DrawImageView drawImageView;
@Override
protected void onCreate (Bundle savedInstanceState) {
super.onCreate (savedInstanceState);
setContentView (R.layout.activity_main);
drawImageView = (DrawImageView) findViewById (R.id.image);
drawImageView.getViewTreeObserver ().addOnGlobalLayoutListener (new ViewTreeObserver.OnGlobalLayoutListener () {
@Override
public void onGlobalLayout () {
drawImageView.getViewTreeObserver ().removeOnGlobalLayoutListener (this);
drawImageView.mCacheBitmap = Bitmap.createBitmap (drawImageView.getWidth (), drawImageView.getHeight (), Bitmap.Config.ARGB_8888);
drawImageView.mCacheCanvas.setBitmap (drawImageView.mCacheBitmap);
}
});
Button iconBtn = (Button) findViewById (R.id.btn_icon);
iconBtn.setOnClickListener (new View.OnClickListener () {
@Override
public void onClick (View v) {
Bitmap bitmap= BitmapFactory.decodeResource (getResources (),R.drawable.icon);
drawImageView.mode (1);
drawImageView.setIcon (bitmap);
}
});
Button textBtn = (Button) findViewById (R.id.btn_text);
textBtn.setOnClickListener (new View.OnClickListener () {
@Override
public void onClick (View v) {
drawImageView.mode (0);
drawImageView.setTextStyle ("这是测试",Color.BLUE,10,Paint.Style.FILL);
}
});
Button lineBtn = (Button) findViewById (R.id.btn_line);
lineBtn.setOnClickListener (new View.OnClickListener () {
@Override
public void onClick (View v) {
drawImageView.mode (2);
drawImageView.setLineStyle (Color.RED,10,Paint.Style.STROKE);
}
});
}
}
运行的效果：
效果图.png
第一个自己完全自定义的控件，记录一下，这短短几十行代码，带给自己的更多的是自信心的提升。
网友评论