如何在Android Java中的ImageView上绘制多个点

Question

I'm setting up an eye detection android project and I want to draw probabilities using Canvas, I'm using Firebase ML kit for custom models I have successfully drawn only one point. I would like to draw points ( probabilities from tflite model that I have ).

I tried using those functions :

private void useInferenceResult(float[] probabilities) throws IOException {

    // [START mlkit_use_inference_result]
    String[] result=new String[80];
    float x=0;
    float y=0;
    ArrayList<Point> listpoint= new ArrayList<Point>();

    for (int i = 0; i < probabilities.length; i++) {

        Log.i("MLKit", String.format("%1.4f", probabilities[i]));
        x=probabilities[i];
        y=probabilities[i+1];
        Point p=new Point(x,y);
        i=i+1;

        p.setX(x);
        p.setY(y);

        Log.i("Information1 ","valeur 1 "+p.getX());

        listpoint.add(p);
            Log.i("Information2 ","valeur 2 "+p.getX());
    }

    for(int j=0;j<listpoint.size();j++){

        Log.e("Information","work");
        Log.e("Resultat","point_"+j+"("+listpoint.get(j).getX()+", "+listpoint.get(j).getY()+")");
        float xx=listpoint.get(j).getX()*100;
        float yy=listpoint.get(j).getY()*100;
        drawpoint(image2,0.20958422f * 100,0.6274962f * 100,1);
        drawpoint(image2, 0.20460524f * 100,0.6708223f * 100,1);

    }
}

//drawpoint function
private void drawpoint(ImageView imageView,float x,float y, int raduis){

    BitmapFactory.Options myOptions = new BitmapFactory.Options();
    myOptions.inDither = true;
    myOptions.inScaled = false;
    myOptions.inPreferredConfig = Bitmap.Config.ARGB_8888;// important
    myOptions.inPurgeable = true;

    Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.imgg,myOptions);
    Paint paint = new Paint();
    paint.setAntiAlias(true);
    paint.setColor(Color.WHITE);

    Bitmap workingBitmap = Bitmap.createBitmap(bitmap);
    Bitmap mutableBitmap = workingBitmap.copy(Bitmap.Config.ARGB_8888, true);

    Canvas canvas = new Canvas(mutableBitmap);
    canvas.drawCircle(x,y, raduis, paint);

    imageView = (ImageView)findViewById(R.id.imageView);
    imageView.setAdjustViewBounds(true);
    imageView.setImageBitmap(mutableBitmap);
}

but I didn't get any result just one point drawn. How can I draw multiples points on imageView?

Answer 1

I solved my problem by changing some lines of code, I declare those variables on the top and I create objects after setContentView:

BitmapFactory.Options myOptions;
Canvas canvas;
Bitmap mutableBitmap;
Bitmap workingBitmap;


@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    btn_open= findViewById(R.id.btn_open);
    image2= findViewById(R.id.imageView);
    myOptions = new BitmapFactory.Options();
    bitmap = BitmapFactory.decodeResource(getResources(), 
    R.drawable.image000880,myOptions);
    paint= new Paint();
    paint.setAntiAlias(true);
    paint.setColor(Color.WHITE);

    workingBitmap = Bitmap.createBitmap(bitmap);
    mutableBitmap = workingBitmap.copy(Bitmap.Config.ARGB_8888, true);
    canvas = new Canvas(mutableBitmap);

   private void drawpoint(ImageView imageView,float x,float y, int raduis){
    myOptions.inDither = true;
    myOptions.inScaled = false;
    myOptions.inPreferredConfig = Bitmap.Config.ARGB_8888;// important
    myOptions.inPurgeable = true;
//  ArrayList<Point> list= new ArrayList<>();
    canvas.drawCircle(x,y, raduis, paint);
    imageView = (ImageView)findViewById(R.id.imageView);
    imageView.setAdjustViewBounds(true);
    imageView.setImageBitmap(mutableBitmap);
}

Hope this solution will help others who have the same situation

Answer 2

Simple ImageView Descendent class.

public class CiclesImageView extends AppCompatImageView {
    private ArrayList<PointF> theDots = new ArrayList<>();
    private Paint paint=new Paint(Paint.ANTI_ALIAS_FLAG);

    public CirclesImageView(Context context) {
        super(context);
        setOnTouchListener(new OnTouchListener() {
          @Override
          public boolean onTouch(View v, MotionEvent event) {
            if(event.getAction()==MotionEvent.ACTION_DOWN)
            drawDot(new PointF(event.getX(),event.getY()));
            return performClick();
          }
        });
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        paint.setColor(Color.BLACK);
        paint.setStyle(Paint.Style.STROKE);
        for (PointF pt:theDots)canvas.drawCircle(pt.x,pt.y,5,paint);
    }

    public void drawDot(PointF dotPoint){
        theDots.add(dotPoint);
        invalidate();
    }
}

This imageView is used the same way you use any other imageView, except if you touch it, it will draw a circle on itself. If you want to draw your own circles, the drawDot(pointF) is public.