如何在Android中使用Canvas将Drawable图片绘制到ImageView上？

Question

我有一个活动，其中包含一个ImageView。我想做的是能够在用户触摸Imageview的位置上绘制来自drawable文件夹的图像。我已经阅读到最好的方法是使用Canvas，但我不确定在哪里和如何将onDraw方法与onTouchListener集成。目前我的代码如下：

public class Main extends Activity
{
   @Override
   public void onCreate(Bundle savedInstanceState)
   {
      super.onCreate(savedInstanceState);
      setContentView(R.layout.main);

      final TextView textView = (TextView)findViewById(R.id.textView);
      final ImageView image = (ImageView) findViewById(R.id.imageView2);

      //Bitmap
      Bitmap viewBitmap = Bitmap.createBitmap(image.getWidth(), image.getHeight(), Bitmap.Config.ARGB_8888);
      Canvas canvas = new Canvas(viewBitmap);
      image.draw(canvas);

      image.setOnTouchListener(new View.OnTouchListener()
      {
         @Override
         public boolean onTouch(View v, MotionEvent event)
         {
            textView.setText("Touch coordinates : " + String.valueOf(event.getX()) + "x" + String.valueOf(event.getY()));
            return false;
         }
      });
   }
}

我想要实现的是，当用户触摸ImageView时，在他触摸的位置准确地绘制一张图片。

- user990230

Answer 1

为了重写ImageView的onDraw()方法，您需要创建一个子类。通过这样做，您可以在onTouchEvent()中进行自定义触摸处理，而不是附加侦听器。以下内容并非完整示例，但类似于以下内容：

public class CustomImageView extends ImageView {

    private ArrayList<Point) mTouches;
    private Bitmap mMarker;

    //Java constructor
    public CustomImageView(Context context) {
        super(context);
        init();
    }

    //XML constructor
    public CustomImageView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    private void init() {
        mTouches = new ArrayList<Point>();
        mMarker = BitmapFactory.decodeResource(context.getResources(), R.drawable.my_marker_image);
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        //Capture a reference to each touch for drawing
        if(event.getAction() == MotionEvent.ACTION_DOWN) {
            mTouches.add( new Point(event.getX(), event.getY()) );
            return true;
        }

        return super.onTouchEvent(event);
    }

    @Override
    protected void onDraw(Canvas c) {
        //Let the image be drawn first
        super.onDraw(c);

        //Draw your custom points here
        Paint paint = new Paint();            
        for(Point p : mTouches) {
            c.drawBitmap(mMarker, p.x, p.y, paint);
        }
    }

}

HTH!

- devunwired

---

谢谢您的回复。在您的示例中，您在哪里将画布设置为imageView2？（我想要绘制的imageview） - user990230

更明确地说，这个自定义类取代了现有布局中的imageView2。ImageView的图像内容和各个触摸点一起绘制在同一个画布上（触摸标记覆盖在图像上），在ImageView的边界内。 - devunwired

请注意，确保此视图上没有附加OnTouchListener，否则它们可能会窃取触摸事件，并确保您的布局中实际上有您的新自定义类的实例，而不是普通的ImageView。 - devunwired

另外，当我执行“mTouches.add(new Point(event.getX(), event.getY())”时，它会给我一个错误。似乎在声明“mTouches = new ArrayList<Point>();”时缺少参数。我该如何解决这个问题？ - user990230

你之所以会出现错误，是因为x/y的值是浮点数，而该构造函数需要一个整数。正如我所提到的，我没有提供一个完整的示例，只是一些伪代码来帮助你朝着正确的方向前进。你不需要做任何事情来激活触摸事件检测。确保层次结构视图中的其他父/兄弟视图也没有捕获/拦截触摸。 - devunwired

Answer 2

我把你的类这样编辑了，现在它对我有用了

public class MyImageView extends androidx.appcompat.widget.AppCompatImageView {
    
    private Bitmap mMarker;
    private Path mPath,  circlePath ;
    private Paint  paint, circlePaint;

    private Canvas mCanvas;

    //Java constructor
    public MyImageView(Context context) {
        super(context);
        init();

    }

    //XML constructor
    public MyImageView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    private void init() {
        mTouches = new ArrayList<Point>();

        paint = new Paint();
        paint.setStyle(Paint.Style.STROKE);
        paint.setStrokeJoin(Paint.Join.ROUND);
        paint.setStrokeCap(Paint.Cap.ROUND);
        paint.setStrokeWidth(12);

        mPath = new Path();
        Paint mBitmapPaint = new Paint(Paint.DITHER_FLAG);
        circlePaint = new Paint();
        circlePath = new Path();
        circlePaint.setStyle(Paint.Style.STROKE);
        circlePaint.setStrokeJoin(Paint.Join.MITER);
        circlePaint.setStrokeWidth(4f);

    }
    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);

        mMarker = Bitmap.createBitmap(w, h, Bitmap.Config.ARGB_8888);
        mCanvas = new Canvas(mMarker);
    }

    private float mX, mY;
    private static final float TOUCH_TOLERANCE = 4;

    private void touch_start(float x, float y) {
        mPath.reset();
        mPath.moveTo(x, y);
        mX = x;
        mY = y;
    }

    private void touch_move(float x, float y) {
        float dx = Math.abs(x - mX);
        float dy = Math.abs(y - mY);
        if (dx >= TOUCH_TOLERANCE || dy >= TOUCH_TOLERANCE) {
            mPath.quadTo(mX, mY, (x + mX)/2, (y + mY)/2);
            mX = x;
            mY = y;

            circlePath.reset();
            circlePath.addCircle(mX, mY, 30, Path.Direction.CW);
        }
    }

    private void touch_up() {
        mPath.lineTo(mX, mY);
        circlePath.reset();
        // commit the path to our offscreen
        mCanvas.drawPath(mPath,  paint);
        // kill this so we don't double draw
        mPath.reset();
    }
    @Override
    public boolean onTouchEvent(MotionEvent event) {
        float x = event.getX();
        float y = event.getY();

        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                touch_start(x, y);
                invalidate();
                break;
            case MotionEvent.ACTION_MOVE:
                touch_move(x, y);
                invalidate();
                break;
            case MotionEvent.ACTION_UP:
                touch_up();
                invalidate();
                break;
        }
        return true;
    }

    @Override
    protected void onDraw(Canvas c) {
        //Let the image be drawn first
        super.onDraw(c);

            c.drawBitmap(mMarker, 0, 0, paint);
        c.drawPath( mPath,  paint);
        c.drawPath( circlePath,  circlePaint);
      
    }

}

- zohra