有效地绘制位于片段内部的 imageView 以响应触摸事件

Question

我有一个应用程序，我在其中的 ImageView 中显示图像，该图像位于从 activity 看到的片段中。我想通过以触摸事件的坐标为中心绘制 dot-like 小圆圈来响应 ImageView 上的触摸事件。

经过谷歌搜索和阅读后，我在片段 class:

中实现了以下代码

public class ImageViewFragment extends Fragment implements View.OnTouchListener
{ 
  private ImageView mImageView;
  private Bitmap mBitmap;
  private List<Pair<Integer, Integer>> mScribblePointsCoords;
  private Paint mPaint;

public interface OnScribbleUpdate
{
    void onNewScribblePoint(List<Pair<Integer, Integer>> coordinates);

}

@Override
public boolean onTouch(View v, MotionEvent event)
{
    v.onTouchEvent(event);
    return true;
}
@Override
public void onCreate(Bundle savedInstanceState)
{
    super.onCreate(savedInstanceState);
    mScribblePointsCoords = new ArrayList<>();
}
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)
{
    View view = inflater.inflate(R.layout.image_view_fragment, container, false);
    view.setOnTouchListener(new View.OnTouchListener()
    {
        @Override
        public boolean onTouch(View v, MotionEvent event)
        {
            if(event.getAction() == MotionEvent.ACTION_DOWN)
            {
                int x = (int) event.getX();
                int y = (int) event.getY();
                mScribblePointsCoords.add(new Pair<>(x, y));
                Bitmap tempBitmap = mBitmap.copy(mBitmap.getConfig(), true);
                Canvas canvas = new Canvas(tempBitmap);
                canvas.drawCircle(x, y, R.dimen.default_scribble_point_radius, mPaint);
                mImageView.setImageDrawable(new BitmapDrawable(getResources(), tempBitmap));
                mBitmap = tempBitmap;
                return true;
            }
            return false;
        }
    });
    mPaint = new Paint();
    mPaint.setColor(Color.BLUE);
    mImageView = view.findViewById(R.id.new_photo_view);
    mImageView.setImageBitmap(mBitmap);
    return view;
}

@Override
public void onResume()
{
    super.onResume();
    mImageView.setImageBitmap(mBitmap);
}

public void setImage(Bitmap bmp)
{
    mBitmap = bmp.copy(bmp.getConfig(), false);
    if(this.isResumed())
    {
        mImageView.setImageBitmap(mBitmap);
    }
}

public void clearScribble()
{
    mScribblePointsCoords.clear();
}

public List<Pair<Integer, Integer>> getScribbleCoordinates()
{
    return mScribblePointsCoords;
}
}

编辑： image_view_fragment.xml

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
             xmlns:app="http://schemas.android.com/apk/res-auto"
             xmlns:tools="http://schemas.android.com/tools"
             android:layout_width="match_parent"
             android:layout_height="match_parent"
             tools:context="cofproject.tau.android.cof.ImageViewFragment">

    <ImageView
        android:id="@+id/new_photo_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:visibility="visible"
        app:srcCompat="@android:color/background_dark"/>
</FrameLayout>

编辑结束

现在，问题是我将整个 ImageView 涂成了纯蓝色（我尝试了 R.dimen.default_scribble_point_radius 的不同半径大小，例如 5、0.5 和 0.1，但无济于事）。

之前：

之后：

我有一个由三部分组成的问题：

我做错了什么，我怎样才能得到一个简单的 dot-like 圆圈而不是让整个 ImageView 变蓝。
我认为我的 onTouch(View v, MotionEvent event) 方法效率很低，因为它必须为每个添加的点重新绘制位图，我想知道是否有一种有效的方法来实现同样的事情。
使用将在其上进行绘图的某种透明视图是否可以省去我的麻烦，如果可以，如何实现这样的事情？

非常感谢您的意见和指导。

Answer 1

您应该使用透明 View，它正好位于 ImageView 上方（z 方向）。这样做的主要原因是性能：在绘制蓝色小圆圈时，ImageView 是 View 的一种相当笨重的类型。

因此您创建了一个自定义 View，它将绘制并将其放置在 ImageView 之上。我通过将它们都放在 FrameLayout:

中来实现这一点

<FrameLayout
    android:layout_width="200dp"
    android:layout_height="200dp">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

    <com.example.paintingcircles.DottedView
        android:id="@+id/dottedView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>
</FrameLayout>

我遵循了你的设置并使用了匿名 OnTouchListener 但当然你也可以让 DottedView 覆盖 onTouchEvent().

在onCreate()中：

final DottedView dottedView = (DottedView) findViewById(R.id.dottedView);
dottedView.setOnTouchListener(new View.OnTouchListener()
{
    @Override
    public boolean onTouch(View view, MotionEvent event)
    {
        if(event.getAction() == MotionEvent.ACTION_DOWN)
        {
            int x = (int) event.getX();
            int y = (int) event.getY();
            dottedView.addScribblePointsCoords(new Pair<>(x, y));
            dottedView.invalidate();
            return true;
        }
        return false;
    }
});

DottedView.java:

public class DottedView extends View
{
    private ArrayList<Pair<Integer, Integer>> mScribblePointsCoords = new ArrayList<>();
    private int radius = 5;
    private Paint mPaint;

    public DottedView(Context context)
    {
        super(context);
        init();
    }

    public DottedView(Context context, @Nullable AttributeSet attrs)
    {
        super(context, attrs);
        init();
    }

    public DottedView(Context context, @Nullable AttributeSet attrs, int defStyleAttr)
    {
        super(context, attrs, defStyleAttr);
        init();
    }

    @Override
    protected void onDraw(Canvas canvas)
    {
        super.onDraw(canvas);
        for (Pair<Integer, Integer> pair: mScribblePointsCoords){
            canvas.drawCircle(pair.first, pair.second, radius, mPaint);
        }
    }

    public void addScribblePointsCoords(Pair pair){
        mScribblePointsCoords.add(pair);
    }

    private void init()
    {
        mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mPaint.setColor(Color.BLUE);
    }
}

有效地绘制位于片段内部的 imageView 以响应触摸事件

Efficiently Drawing over an imageView that resides inside of a fragment in response to a touch event

android

canvas

imageview

android-fragments

ontouch