关于图像:如何在 Android 上的 ImageView 中画一条线?

How to draw a Line in ImageView on Android?

我想知道当用户滑动手指时如何在 ImageView 上画一条线?

任何人都可以解释一下吗?或者也许任何链接都可以开始。


您必须拥有自己的 ImageView 并覆盖 onDraw 函数。使用类似的东西

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
public class MyImageView extends ImageView{

    public MyImageView(Context context) {
        super(context);
        // TODO Auto-generated constructor stub
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        Paint p = new Paint(Paint.ANTI_ALIAS_FLAG);
        canvas.drawLine(0, 0, 20, 20, p);

    }

}

并在你的主类中创建对象 MyImageView;当您触摸显示屏时,调用 update(); 函数


这是一个完整的例子,说明如何在另一个图像上绘制绿色矩形:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
package CustomWidgets;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.util.AttributeSet;

/**
 * Allows to draw rectangle on ImageView.
 *
 * @author Maciej Nux Jaros
 */
public class DrawImageView extends ImageView {
    private Paint currentPaint;
    public boolean drawRect = false;
    public float left;
    public float top;
    public float right;
    public float bottom;

    public DrawImageView(Context context, AttributeSet attrs) {
        super(context, attrs);

        currentPaint = new Paint();
        currentPaint.setDither(true);
        currentPaint.setColor(0xFF00CC00);  // alpha.r.g.b
        currentPaint.setStyle(Paint.Style.STROKE);
        currentPaint.setStrokeJoin(Paint.Join.ROUND);
        currentPaint.setStrokeCap(Paint.Cap.ROUND);
        currentPaint.setStrokeWidth(2);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        if (drawRect)
        {
            canvas.drawRect(left, top, right, bottom, currentPaint);
        }
    }
}

当你定义了这个之后,你可以用上面的 View (widget) 替换 ImageView,例如:

1
2
3
4
5
6
<CustomWidgets.DrawImageView
    android:id="@+id/widgetMap"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:src="@drawable/map_small"
/>

然后您可以在控制布局的活动的触摸事件中使用它:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
    mapImageView.setOnTouchListener(new View.OnTouchListener() {
        @Override
        public boolean onTouch(View v, MotionEvent event) {
            DrawImageView drawView = (DrawImageView) v;

            // set start coords
            if (event.getAction() == MotionEvent.ACTION_DOWN) {
                drawView.left = event.getX();
                drawView.top = event.getY();
            // set end coords
            } else {
                drawView.right = event.getX();
                drawView.bottom = event.getY();
            }
            // draw
            drawView.invalidate();
            drawView.drawRect = true;

            return true;
        }
    });

当然,您可以制作一些 getter 和 setter 以及其他 Java 过度工程例程;-)。


看看 ApiDemos 示例 FingerPaint。

通过使用它,您可以通过触摸屏幕在 ImageView 上画线。


为了绘制用户实际绘制的线,您必须覆盖 dispatchTouchEvent。从该事件中,您可以获取线的坐标并在 onDraw 中绘制它们,如 george 所示。

http://developer.android.com/reference/android/app/Activity.html#dispatchTouchEvent(android.view.MotionEvent)