今天教大家做一个,图片四角任意定位自定义控件

微信扫一扫,分享到朋友圈

今天教大家做一个,图片四角任意定位自定义控件

让我们先来看看效果gif:

当然,需求只是满足我个人项目,肯定会有不足的地方

首先,在开发这个自定义控件之前,我们必须先得搞清楚最重要的两点,需求与实现思路,让我们来探讨下:

需求:

1.有图片背景存在,并且这个图片背景可随时更换,不固定

2.图上有四个角,且四个角可任意拖动

3.点击拖动任意四角其中一角会出现一个放大镜,放开则放大镜消失

实现思路:

1.由于我们项目后面流程还需要旋转,跟其他一切繁琐的操作,刚好imageview可以满足,所以我选择自定义imageview

2.在imageview上,画出四个点,通过onTouchEvent控制点的移动

3.也是同理,通过onTouchEvent来判断放大镜的显示与隐藏

好了,接下来就是大家最痛苦的自定义view开发环节了,属实开心

第一步,我们自定义我们需要的属性

定义一些我们需要的属性,比如,是否显示放大镜,线的宽度,颜色

定义一些画笔

第二步:

在ondraw方法中绘制出我们需要的东西,(四个点,四条线,以及一个放大镜),不过在此之前,我们需要得到一些关键性信息,比如图片的缩放比,跟图片的实际显示位置,方便我们做计算

写出两个方法

得到图片信息

接下来,在onDrawCropPoint方法中

绘制三个部件

1.绘制选区线

有些人要问了,这个mCropPoints是什么了?我下面跟你讲

由于我们项目是需要从外部传入四角参数,来进行人像或物体定位裁剪,所以我从外部会传入mCropPoints数据进来

那有些同学会说, 我没有mCropPoints的参数传进来,可咋办呢?别怕,我们可以自己写一个根据图片宽高最大化的mCropPoints,然后在代码中调用即可

这样我们就得到了一个最大化的point[]了

写一个方法,使得我们在代码可以调用

2.绘制锚点,就是四个按钮

先判断 mCropPoints是否为null,接着循环四次(四个点)根据point的位置,每个位置,两个圆

内圈与外圈

3.绘制放大镜(其实并没有放大,只是一个增加定位准确度的效果,因为用户移动锚点的时候,手指头会挡住按钮,无法准确定位,需要做放大镜功能可以私聊我,下个版本可以增加)

外圈灰色+内圈图像+十字准心

先判断是否有mMagnifierDrawable,若为null,则去创建一个,用来显示放大镜

备注:X,Y是onTouchEvent的参数,我将其作为变量来计算

radius是放大镜的半径

上图总结概括一下,创建一个 椭圆形,用来展示放大镜

好了,到目前为止,我们的图像都已经画好了,接下来是移动四个锚点了

一步步分解

1.手指按下

如果点击位置小于我设置的半径,则相当于,我点击了最近点的锚点,将该点取出

2.手指移动,(由于代码过多,分段裁剪)

3.手指拿起,将mDraggingPoint设置为null,由于为null则放大镜判断不显示

大家辛苦了,至此,我们的四角任意定位控件,已经完成了

最后在我们的XML中引用我们的自定义控件,然后在代码中注册,运行即可看到效果

设为最大化

此为简易版,仅供自定义不熟练的同学观看,大牛请绕道,我们下期再会!!!

荆轲刺秦王,毛腿肩上扛

需要demo的同学留个邮箱哈~~~

微信扫一扫,分享到朋友圈

今天教大家做一个,图片四角任意定位自定义控件

定时器的实现原理及参考

上一篇

CSS 小结笔记之BFC

下一篇

你也可能喜欢

今天教大家做一个,图片四角任意定位自定义控件

长按储存图像,分享给朋友