利用photoview实现图片的标注以及移动功能

菜鸟进场,方圆十里,寸草不生
今天有一个需求,实现一个标注功能,就是类似于地图开发上的一个marker,只不过背景采用自己上传的图片,然后marker还要实现可以拖拽的功能,大概实现的功能就是这样的:
演示

废话不多说,先说原理,再上代码。
原理:
1、覆盖物图片的拖动:这个简单嘛,网上代码一抓一大把,重点在于初始化相对于图片的位置。

2、覆盖物图片如何跟随背景图移动:利用photoview的放大缩小功能,通过photoview自带的监听来返回图片当前位置信息,然后根据当前的位置来动态设置覆盖物的位置。

好吧,我觉得我也没说清楚。直接上代码!

/**
 * @author zx
 * @date 2018/10/30/030 17:29
 * email 1058083107@qq.com
 * description  图片标注
 */
public class MainActivity extends AppCompatActivity implements View.OnTouchListener {

    @BindView(R.id.bt_wind)
    Button btWind;
    @BindView(R.id.bt_shade)
    Button btShade;
    @BindView(R.id.bt_rain)
    Button btRain;
    @BindView(R.id.bt_sun)
    Button btSun;
    @BindView(R.id.rl_map)
    RelativeLayout rlMap;
    @BindView(R.id.iv_map)
    PhotoView ivMap;
    @BindView(R.id.iv_reset)
    ImageView ivReset;

    /**
     * 存放动态添加的标注图片
     */
    private List<ImageView> list = new ArrayList<>();


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ButterKnife.bind(this);
        DensityUtil.init(this);
        setListener();
    }

    private void setListener() {
        /**
         * 设置复位监听
         */
        ivReset.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                /**
                 * 恢复放大倍数(好像photoview不能缩小)
                 */
                ivMap.setScale(1);
            }
        });
        /**
         * photoview图片移动监听(这个返回的位置是背景图相对于左上角与屏幕的相对距离)
         */
        ivMap.setOnMatrixChangeListener(new PhotoViewAttacher.OnMatrixChangedListener() {
            @Override
            public void onMatrixChanged(RectF rect) {
                for (int i = 0; i < list.size(); i++) {
                    ImageView imageView = list.get(i);
                    WeatherBean bean = (WeatherBean) imageView.getTag();
                    if (imageView != null) {
                    	//原始的相对位置乘当前的放大倍数再加上偏移量即当前的相对位置
                        imageView.setX(bean.getPointX() * ivMap.getScale() + rect.left);
                        imageView.setY(bean.getPointY() * ivMap.getScale() + rect.top);
                    }
                }
            }
        });
    }

    /**
     * 点击显示不同的图标,可以对应以后的指示灯什么的
     *
     * @param view
     */
    @OnClick({R.id.bt_wind, R.id.bt_shade, R.id.bt_rain, R.id.bt_sun})
    public void onViewClicked(View view) {
        ImageView imageView = new ImageView(this);
        WeatherBean bean = new WeatherBean();
        switch (view.getId()) {
            case R.id.bt_wind:
                imageView.setImageResource(R.mipmap.wind);
                bean.setKind(1);
                break;
            case R.id.bt_shade:
                bean.setKind(2);
                imageView.setImageResource(R.mipmap.shade);
                break;
            case R.id.bt_rain:
                bean.setKind(3);
                imageView.setImageResource(R.mipmap.rain);
                break;
            case R.id.bt_sun:
                bean.setKind(4);
                imageView.setImageResource(R.mipmap.sun);
                break;
            default:
        }
        imageView.setOnTouchListener(this);
        //不管图片有没有放大,新添加的图标永远出现在右上角
        bean.setPointX(0 - ivMap.getDisplayRect().left);
        bean.setPointY(0 - ivMap.getDisplayRect().top);
        imageView.setTag(bean);
        list.add(imageView);
        rlMap.addView(imageView);
    }

    /**
     * 这个是用来计算手指移动距离的
     */
    float oldX = 0;
    float oldY = 0;

    @Override
    public boolean onTouch(View v, MotionEvent event) {
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                oldX = event.getRawX();
                oldY = event.getRawY();
                break;
            case MotionEvent.ACTION_MOVE:
                //让控件跟着自己的手指动
                v.setX(v.getX() + event.getRawX() - oldX);
                v.setY(v.getY() + event.getRawY() - oldY);
                oldX = event.getRawX();
                oldY = event.getRawY();
                break;
            case MotionEvent.ACTION_UP:
                //如果在删除区域,就把他给删除掉
                if (v.getX() > DensityUtil.screenWidth - DensityUtil.dip2px(50) && v.getY() < DensityUtil.dip2px(50)) {
                    rlMap.removeView(v);
                }
                WeatherBean bean = (WeatherBean) v.getTag();
                RectF rectF = ivMap.getDisplayRect();
                //计算相对于photoview左边定点的相对位置
                bean.setPointX((v.getX() - rectF.left) / ivMap.getScale());
                bean.setPointY((v.getY() - rectF.top) / ivMap.getScale());
                break;
            default:
        }
        return true;
    }
}

注释在代码里,就是相对位置的计算,感觉我越解释越乱,反正大概也就这么回事儿…
如果有什么不懂的地方,爱莫能助啊。

  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值