在图片上做标签，图片可放大缩小

最近有个功能需要标记出没张图里脸部，并且点击大图后，图片可以缩放，标记也会跟着移动。有点类似地图tag

眼见为实，先上一张效果图：

由于最近项目已经完成差不多，在这段时间里把觉得有质量的功能拿出来和小伙伴们一起分享。

首先这里先借鉴了下前辈的在图片上做标签，在此感谢无缘公子。

梳理功能以后，首先你要知道。后台返回的数据，包括 左上角坐标点    和  右下角坐标点。同时还有图片长宽。

知道这些以后，那么我们往下面看。

根据在图片上做标签的思路，就是自定义View,在imageView上铺上一层标记层。在项目中，ImageLayout类。

当然 告诉你坐标点，和原图大小。其实就是做一个初中的几何题目。只不过难的是坐标图在手机上。

手机默认横向右为x正坐标，竖向下为y正坐标。

这里要明确。大图，宽设置为满屏。这里的原图相对手机屏幕的比例出来了  

scale = pic_with / screenWith

然后根据这个比例算出，左上角点右下角 2个点在 手机屏幕的实际位置

int tempX = point_left_x * screenWith/ pic_with ;

int tempY = point_left_y * screenHeight/ pic_height ;

 //正确的坐标  左上角
int trueX = left + tempX;

int trueY = top + tempY;

这里列举了左上角的点。

知道了点以后，new ImageView然后加入到你的标记层。

//左上角的点
ImageView imageView_top_left = new ImageView(getContext());
LayoutParams leoParams_top_left = new LayoutParams(layoutParams.WRAP_CONTENT, layoutParams.WRAP_CONTENT);
leoParams_top_left.leftMargin = trueX;
leoParams_top_left.topMargin = trueY;
imageView_top_left.setImageResource(R.mipmap.left_top);

layouPoints.addView(imageView_top_left, leoParams_top_left);

看到这里是不是都已经明白了。

当然我这里是标记脸4个点，知道左上和右下，已经确定了4个点。

说到这里，你会问。图片缩放呢。那么接下来页是本文的重点

首先感谢一开元控件photoView  github地址

这个开源控件支持缩放，支持翻转。支持小图到大图动画。个人感觉还不错。

关键是里面有个监听方法，监听当前ImageView缩小 还是放大

executeTranslate

监听返回的是一个RectF对象，经过大量测试发现，这个就是你设置的图片在手机窗口的实际坐标。记住是手机窗口  并非手机屏幕。是不是有点糊涂，我们可以理解为就是超出手机屏幕外的。

在photoView源码里写一个接口，将Recf拿出来。同时重新绘制标记层，代码如下：

imgBg.setOnMatrixChangeListener(new OnMatrixChangedListener() {
    @Override
    public void onMatrixChanged(RectF rect) {
        Log.e("是不是有了",rect.toString()+"");
        Info info = PhotoView.getImageViewInfo(imgBg);
        int left = (int) info.getmImgRect().left;
        int top = (int) info.getmImgRect().top;
        int right = (int) info.getmImgRect().right;
        int bottom = (int) info.getmImgRect().bottom;
        addPoints(left,top,right,bottom);
    }
});

自此整个功能，基本已经完成。

如果还不明白，大家可以深入去了解photoView整个控件、

当然点击事件的话，点击图片和电解标签。项目里都有备注的、如果对你有帮助，请帮忙star下吧

大神勿喷，支持原创！最后附上源码 源码下载

github地址