让我们先来看看效果gif:
首先,在开发这个自定义控件之前,我们必须先得搞清楚最重要的两点,需求与实现思路,让我们来探讨下:
需求:
1.有图片背景存在,并且这个图片背景可随时更换,不固定
2.图上有四个角,且四个角可任意拖动
3.点击拖动任意四角其中一角会出现一个放大镜,放开则放大镜消失
实现思路:
1.由于我们项目后面流程还需要旋转,跟其他一切繁琐的操作,刚好imageview可以满足,所以我选择自定义imageview
2.在imageview上,画出四个点,通过onTouchEvent控制点的移动
3.也是同理,通过onTouchEvent来判断放大镜的显示与隐藏
好了,接下来就是大家最痛苦的自定义view开发环节了,属实开心
第一步,我们自定义我们需要的属性
第二步:
在ondraw方法中绘制出我们需要的东西,(四个点,四条线,以及一个放大镜),不过在此之前,我们需要得到一些关键性信息,比如图片的缩放比,跟图片的实际显示位置,方便我们做计算
接下来,在onDrawCropPoint方法中
1.绘制选区线
由于我们项目是需要从外部传入四角参数,来进行人像或物体定位裁剪,所以我从外部会传入mCropPoints数据进来
那有些同学会说, 我没有mCropPoints的参数传进来,可咋办呢?别怕,我们可以自己写一个根据图片宽高最大化的mCropPoints,然后在代码中调用即可
2.绘制锚点,就是四个按钮
3.绘制放大镜(其实并没有放大,只是一个增加定位准确度的效果,因为用户移动锚点的时候,手指头会挡住按钮,无法准确定位,需要做放大镜功能可以私聊我,下个版本可以增加)
备注:X,Y是onTouchEvent的参数,我将其作为变量来计算
radius是放大镜的半径
好了,到目前为止,我们的图像都已经画好了,接下来是移动四个锚点了
1.手指按下
2.手指移动,(由于代码过多,分段裁剪)
3.手指拿起,将mDraggingPoint设置为null,由于为null则放大镜判断不显示
大家辛苦了,至此,我们的四角任意定位控件,已经完成了
最后在我们的XML中引用我们的自定义控件,然后在代码中注册,运行即可看到效果
此为简易版,仅供自定义不熟练的同学观看,大牛请绕道,我们下期再会!!!
荆轲刺秦王,毛腿肩上扛
需要demo的同学留个邮箱哈~~~