我如何在android中用x-y位置在图像上制作可移动的圆点?

13z8s7eq  于 2021-06-29  发布在  Java
关注(0)|答案(1)|浏览(292)

我有一个图像,我想在图像上做一个8点,这个点在触摸点和拖动到屏幕上时是移动的,这有可能在图像上做那种触摸和移动的点吗?
在8点上显示上面的图像,我想得到这样的结果,当你触摸到那个点时,那个点是移动的,在图像上移动,也要那个点的x,y坐标。

我尝试了下面的代码,但它的显示点的形式不正确,所有的点在同一时间移动。

class DrawingView extends View {
        Bitmap bitmap;

        float x, y;

        public DrawingView(Context context) {
            super(context);
            bitmap = BitmapFactory.decodeResource(context.getResources(), R.drawable.ic_dot);
        }

        public boolean onTouchEvent(MotionEvent event) {

            switch (event.getAction()) {
                case MotionEvent.ACTION_DOWN: {

                }
                break;

                case MotionEvent.ACTION_MOVE: {
                    x = (int) event.getX();
                    y = (int) event.getY();

                    invalidate();
                }

                break;
                case MotionEvent.ACTION_UP:

                    x = (int) event.getX();
                    y = (int) event.getY();
                    System.out.println(".................." + x + "......" + y); //x= 345 y=530
                    invalidate();
                    break;
            }
            return true;
        }

        @Override
        public void onDraw(Canvas canvas) {
            Paint paint = new Paint();
            paint.setStyle(Paint.Style.FILL);
            paint.setColor(Color.WHITE);
           // canvas.drawBitmap(bitmap, x, y, paint);  //originally bitmap draw at x=o and y=0
            for (int i = 0; i < 8; i++) {
                canvas.drawBitmap(bitmap, x++, y++,  null);
            }
        }
    }

如果有人知道这种类型的视图或任何解决方案,请提供帮助。
提前感谢:)

huwehgph

huwehgph1#

创建自定义 ImageView 延伸了 androidx.appcompat.widget.AppCompatImageView 类,该类实现 OnTouchListener 带着一个 ArrayList<Dot> 它将跟踪 Dot s。
你重写了吗 onDraw(Canvas canvas) 风俗习惯 ImageView 并遍历 ArrayListDot 一个接一个地画 Dot 在列表中使用 canvas.drawCircle(float cx, float cy, float radius, @NonNull Paint paint) .
无论何时 MotionEvent.ACTION_DOWN 如果你检查触摸是否在现有的点内。
如果是你设定的 Dot 全局变量,即。 touchedDot ,当用户移动时 OnTouchListener 火灾 MotionEvent.ACTION_MOVE 然后检查一下 touchedDot != null 如果是这样的话,简单地改变一下 x 以及 y 通过 touchedDot.x = event.getX() 以及 touchedDot.y = event.getY() 然后打电话 invalidate() 这就叫 ImageView s onDraw 方法,点将随着用户手指的移动而移动。当用户从触摸或移动中抬起手指时, MotionEvent.ACTION_UP 如果你被解雇了,你只要检查一下 touchedDot == null 如果是这样,那么你就创建一个新的 Dotx 以及 y 他们进来了,否则你就进去了 touchedDot = null 为下一个移动或触摸事件重置。
下面是我使用毕加索创建的一个示例,用于将图像加载到自定义 ImageView :
内部版本.gradle:

dependencies {
    ...
    implementation 'com.squareup.picasso:picasso:2.71828'
}

androidmanifest.xml:

<uses-permission android:name="android.permission.INTERNET" />

drawabledotimageview.java文件:

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.util.Log;
import android.view.MotionEvent;
import android.view.View;

import androidx.annotation.NonNull;
import androidx.annotation.Nullable;

import java.util.ArrayList;

public class DrawableDotImageView extends androidx.appcompat.widget.AppCompatImageView implements View.OnTouchListener {

    private final ArrayList<Dot> dots = new ArrayList<>();
    private Paint dotPaint;
    private Dot touchedDot;

    public DrawableDotImageView(@NonNull Context context) {
        super(context);
        setup();
    }

    public DrawableDotImageView(@NonNull Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        setup();
    }

    public DrawableDotImageView(@NonNull Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        setup();
    }

    private void setup() {
        setOnTouchListener(this);
        dotPaint = new Paint();
        dotPaint.setColor(Color.WHITE);
        dotPaint.setAlpha(100);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        dots.forEach((dot) -> {
            canvas.drawCircle(dot.getX(), dot.getY(), dot.getRadius(), dotPaint);
            Log.d("ImageView", "Drawing X: " + dot.x + " Y: " + dot.y);
        });
    }

    @Override
    public boolean onTouch(View v, MotionEvent event) {
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                dots.forEach((dot) -> {
                    if (dot.isInside(event.getX(), event.getY())) {
                        touchedDot = dot;
                        Log.d("ImageView", "Dot touched");
                    }
                });
                break;
            case MotionEvent.ACTION_MOVE:
                if (touchedDot != null) {
                    touchedDot.x = event.getX();
                    touchedDot.y = event.getY();
                    invalidate();
                    Log.d("ImageView", "Dot moving X: " + touchedDot.x + " Y: " + touchedDot.y);
                }
                break;
            case MotionEvent.ACTION_UP:
                if (touchedDot != null) {
                    touchedDot = null;
                } else {
                    dots.add(new Dot(event.getX(), event.getY(), 35));
                    invalidate();
                    Log.d("ImageView", "Dot created X: " + event.getX() + " Y: " + event.getY());
                }
                break;
            case MotionEvent.ACTION_CANCEL:
                break;
            default:
                break;
        }
        return true;
    }

    private static class Dot {
        private float x;
        private float y;
        private final float radius;

        public Dot(float x, float y, float radius) {
            this.x = x;
            this.y = y;
            this.radius = radius;
        }

        public float getX() {
            return x;
        }

        public float getY() {
            return y;
        }

        public float getRadius() {
            return radius;
        }

        //https://www.geeksforgeeks.org/find-if-a-point-lies-inside-or-on-circle/
        public boolean isInside(float x, float y) {
            return (getX() - x) * (getX() - x) + (getY() - y) * (getY() - y) <= radius * radius;
        }
    }
}

testframent.xml:(根据自己的需要更改包名)

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.example.myapplicationjava.DrawableDotImageView
        android:id="@+id/imageView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="fitXY" />

</androidx.constraintlayout.widget.ConstraintLayout>

testframent.java测试框架:

@Override
public void onViewCreated(@NonNull View view, Bundle savedInstanceState) {
    super.onViewCreated(view, savedInstanceState);
    DrawableDotImageView imageView = view.findViewById(R.id.imageView);
    Picasso.get().load("https://i.pinimg.com/originals/d4/d8/a0/d4d8a016155f00165411066bb9a0ab42.jpg").into(imageView);
}

产生:

相关问题