可绘制图标，文字，贝塞尔曲线的ImageView

最近项目中遇到了个新需求，要求在图片上能够绘制不同的图标，文字，和轨迹。原生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

第一个自己完全自定义的控件，记录一下，这短短几十行代码，带给自己的更多的是自信心的提升。