根据坐标点在图片上标记

根据标记点的坐标在图标上画标记点，效果如下图所示：图上的1和2就是根据坐标画的标记点

 使用ViewPager实现给多张图标做标记，滑动查看

用到的实体类,内容可根据实际情况增加或删除字段：ImgSimple 

public class ImgSimple {

    public String url;//图片连接
    public float scale;//图片显示区域的宽高比
    public ArrayList<PointSimple> pointSimples;//标记点数据
}

PointSimple 标记点数据类

public class PointSimple {

    // 标记点距离左侧距离 (相对于图片容器左上角为原点)
    public double marginLeft;
    // 标记点距离顶部距离
    public double marginTop;
}

ViewPager显示图片的适配器ImgBrowsePagerAdapter

public class ImgBrowsePagerAdapter extends PagerAdapter {

    List<ImgSimple> imgSimples;
    List<View> views;
    Activity mContext;

    private int width;

    public ImgBrowsePagerAdapter(Activity context, List<ImgSimple> imgSimples) {
        this.mContext = context;
        this.imgSimples = imgSimples;
        this.views = new ArrayList<>();

        DisplayMetrics dm = new DisplayMetrics();
        context.getWindowManager().getDefaultDisplay().getMetrics(dm);
        width = dm.widthPixels;
        Log.e("mytag","width="+width);
    }

    @Override
    public int getCount() { // 获得size
        return imgSimples.size();
    }

    @Override
    public boolean isViewFromObject(View arg0, Object arg1) {
        return arg0 == arg1;
    }

    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {

        container.removeView((View) object);
    }

    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        LinearLayout view = (LinearLayout) LayoutInflater.from(mContext).inflate(R.layout.layout_img_browse, null);
        ImageLayout layoutContent = (ImageLayout) view.findViewById(R.id.layoutContent);
        try {
            String imgUrl = imgSimples.get(position).url;
            float scale = imgSimples.get(position).scale;
            ArrayList<PointSimple> pointSimples = imgSimples.get(position).pointSimples;
            layoutContent.setPoints(pointSimples);
            Log.e("mytag","scale="+scale);
            int height = (int) (width * scale);
            layoutContent.setImgBg(width, height, imgUrl);
        } catch (Exception e) {
            e.printStackTrace();
        }
        container.addView(view);
        return view;
    }
}

adapter布局layout_img_browse.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical">

    <com.android.customView.imagePoint.ImageLayout
        android:id="@+id/layoutContent"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"/>

</LinearLayout>

自定义ImageLayout

import android.content.Context;
import android.graphics.drawable.AnimationDrawable;
import android.util.AttributeSet;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.FrameLayout;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;
import android.widget.Toast;

import com.bumptech.glide.Glide;
import com.example.test1.R;
import com.example.test1.activity.image.PointSimple;

import java.util.ArrayList;

/**
 * Created by WJY.
 * Date: 2021-12-08
 * Time: 9:39
 * Description: 图片上添加标记点
 */
public class ImageLayout extends FrameLayout implements View.OnClickListener {

    ArrayList<PointSimple> points;
    FrameLayout layouPoints;
    ImageView imgBg;
    Context mContext;

    public ImageLayout(Context context) {
        this(context, null);
    }

    public ImageLayout(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public ImageLayout(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        initView(context, attrs);
    }


    private void initView(Context context, AttributeSet attrs) {
        mContext = context;
        View imgPointLayout = inflate(context, R.layout.layout_imgview_point, this);
        imgBg = (ImageView) imgPointLayout.findViewById(R.id.imgBg);
        layouPoints = (FrameLayout) imgPointLayout.findViewById(R.id.layouPoints);
    }

    public void setImgBg(int width, int height, String imgUrl) {
        ViewGroup.LayoutParams lp = imgBg.getLayoutParams();
        lp.width = width;
        lp.height = height;
        imgBg.setLayoutParams(lp);

        ViewGroup.LayoutParams lp1 = layouPoints.getLayoutParams();
        lp1.width = width;
        lp1.height = height;
        layouPoints.setLayoutParams(lp1);
        Glide.with(mContext).load(imgUrl).into(imgBg);
        Log.e("mytag", "setImgBg width=" + width + "----setImgBg height=" + height);
        addPoints(width, height);
    }

    public void setPoints(ArrayList<PointSimple> points) {
        this.points = points;
    }

    private void addPoints(int width, int height) {
        layouPoints.removeAllViews();
        for (int i = 0; i < points.size(); i++) {
//            double width_scale = points.get(i).width_scale;
//            double height_scale = points.get(i).height_scale;
            double marginLeft = points.get(i).marginLeft;
            double marginTop = points.get(i).marginTop;
            Log.e("mytag", "marginLeft=" + marginLeft + "----marginTop=" + marginTop);
            Log.e("mytag", "int marginLeft=" + (int) marginLeft + "----int marginTop=" + (int) marginTop);

            LinearLayout view = (LinearLayout) LayoutInflater.from(mContext).inflate(R.layout.layout_img_point, this, false);
            ImageView imageView = (ImageView) view.findViewById(R.id.imgPoint);
            imageView.setTag(i);

//            AnimationDrawable animationDrawable = (AnimationDrawable) imageView.getDrawable();
//            animationDrawable.start();

            TextView tv_imgPoint = view.findViewById(R.id.tv_imgPoint);
            tv_imgPoint.setText(i+1+"");

            LayoutParams layoutParams = (LayoutParams) view.getLayoutParams();
//            layoutParams.leftMargin = (int) (width * width_scale);
//            layoutParams.topMargin = (int) (height * height_scale);
            layoutParams.leftMargin = (int) marginLeft;
            layoutParams.topMargin = (int) marginTop;

            imageView.setOnClickListener(this);
            layouPoints.addView(view, layoutParams);
        }
    }

    @Override
    public void onClick(View view) {
        int pos = (int) view.getTag();
        Toast.makeText(getContext(), "pos : " + pos, Toast.LENGTH_SHORT).show();
    }
}

layout_imgview_point.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <ImageView
        android:id="@+id/imgBg"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:adjustViewBounds="true"
        android:scaleType="centerInside"
        android:background="@color/green"/>

    <FrameLayout
        android:id="@+id/layouPoints"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center" />

</FrameLayout>

在页面上使用

ViewPager viewPagerImgs;//显示测点图片，可显示多张图 滑动
private List<ImgSimple> imgSimples = new ArrayList<>();
PagerAdapter pagerAdapter;   

 
private void showImg(){
        viewPagerImgs.setOffscreenPageLimit(2);

        imgSimples = new ArrayList<>();
        float imgW = Image().getWidth();//图片宽
        float imgH = Image().getHeight();//图片高
        float imgYScale = MyApplication.screenWidth * 0.5f / imgH;//图片高缩放比  以高来计算
        ImgSimple imgSimple = new ImgSimple();
        imgSimple.url = Image().getImageUrl();
        imgSimple.scale = 0.5f;//高宽比

        ArrayList<PointSimple> pointSimples = new ArrayList<>();
        if (null != details){
            for (int i = 0; i < details.size(); i++){
                float showPW = details.get(i).getXVal() * imgYScale;//缩放后点X
                float showPH = details.get(i).getYVal() * imgYScale;//缩放后点Y
                PointSimple pointSimple = new PointSimple();
                pointSimple.marginLeft = (MyApplication.screenWidth - imgW * imgYScale) / 2 + showPW;
                pointSimple.marginTop = showPH;
                pointSimples.add(pointSimple);
            }
            imgSimple.pointSimples = pointSimples;
            imgSimples.add(imgSimple);
            pagerAdapter = new ImgBrowsePagerAdapter(context, imgSimples);
            viewPagerImgs.setAdapter(pagerAdapter);
        }
    }

布局文件

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#000000"
    android:orientation="vertical">

    <androidx.viewpager.widget.ViewPager
        android:id="@+id/viewPagerImgs"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center" />

</FrameLayout>

模拟数据

private void initData() {        
        float imgW = 571,imgH = 390;//图片宽高
        float showW = 720f,showH = 360f;//显示区域的宽高
        ImgSimple imgSimple5 = new ImgSimple();
        imgSimple5.url = "图片地址随便在网上照一张就可以";
        imgSimple5.scale = showH / showW;//高宽比
        float imgYScale = showH / imgH;//图片高缩放比  以高来计算
        float igW = imgW * imgYScale,igH = showH;//图片缩放后宽高

        float p1W = 365,p1H = 163,p2W = 26,p2H = 156;//点1 和 点2   的X  Y坐标值
//        float p1W = 229,p1H = 61,p2W = 192,p2H = 259;//点1 和 点2   的X  Y坐标值
        float showP1W = p1W * imgYScale;//缩放后点1X
        float showP1H = p1H * imgYScale;//缩放后点1Y
        float showP2W = p2W * imgYScale;//缩放后点2X
        float showP2H = p2H * imgYScale;//缩放后点2Y
        Log.e("mytag","showP1W="+showP1W+"----showP1H="+showP1H);
        Log.e("mytag","showP2W="+showP2W+"----showP2H="+showP2H);

        ArrayList<PointSimple> pointSimples5 = new ArrayList<>();
        PointSimple pointSimple51 = new PointSimple();
        pointSimple51.marginLeft = (showW - igW) / 2 + showP1W;
        pointSimple51.marginTop = showP1H;

        PointSimple pointSimple52 = new PointSimple();
        pointSimple52.marginLeft = (showW - igW) / 2 + showP2W;
        pointSimple52.marginTop = showP2H;

        pointSimples5.add(pointSimple51);
        pointSimples5.add(pointSimple52);
        imgSimple5.pointSimples = pointSimples5;
        imgSimples.add(imgSimple5);

    }