近期也是因为准备做地图交互相关的需求#xff0c;功能非常复杂#x…一、前言

很久没有更新Android

原生技术内容了前些年一直在做跨端方向开发最近换工作用重新回到原生技术又回到了熟悉但有些生疏的环境真是感慨万分。

近期也是因为准备做地图交互相关的需求功能非常复杂尤其是交互部分不过再复杂的交互只要一点点将它拆解分而治之问题还是可以解决就比如接下来要做的放大镜功能。

二、功能设计

该功能的场景是在操作地图时对于边缘的精细化操作像素级别的需要在放大镜里显示正在操作的地图区域。

比如

如上图我在操作地图里的内容时可以在左上角看到我手指操作的内容。

这里需要支持如下几点

支持设置放大镜的放大倍数支持实时更新放大镜里的内容手指操作地图时放大镜要里的内容要一直显示刷新手指松开时放大镜里的内容要清空。

放大镜是个圆形。

三、功能实现

路径知识因为正常的图形都是方形因此需要图形裁切才行这里会涉及到canvas.clipPathAPI。

具体代码如下

Paint(Paint.ANTI_ALIAS_FLAG);clipPath

new

绘制圆形路径clipPath.addCircle(viewHeight

2f,

/2,radius,Path.Direction.CW);//

裁切圆形画布canvas.clipPath(clipPath);}3.2

绘制手指操作区域

Bitmap.createBitmap(getDrawingCache());

setDrawingCacheEnabled(false);当然这里里的Bitmap是一整个View的我们仅想放大手指操作比如点击、滑动区域的Bitmap这就需要手指所在的坐标区域。

我们可以自定义一个View然后重写它的onTouchEvent方法通过event.getX(),

event.getY()获取手指实时操作的坐标然后传给放大镜View比如我们这次自定义的放大镜MagnifierView里面连同前面的Bitmap一起传过去。

这里可以搞一个回调接口。

public

paint);复杂的是计算放大内容的源区域也就是srcRect。

这里先解释下dstRect它是定义目标矩形也就是放大镜自身大小实现如下

RectF

viewHeight);接下来我们开始设置srcRect。

写到这里我们好像漏了一个关键参数“放大倍数”。

放大倍数

2.0f;因为我们要显示的区域和放大倍数有直接关联。

srcRect

对象它里面有四个参数左上右下相当于当前显示区域范围计算公式如下

float

2;先来解释下上面的公式意义focusX对应的就是手指操作的x坐标即event.getX()focusY

SCALE_FACTOR

因为我们想要显示的是“手指为中心显示区域大小是当前放大镜的面积”因此需要(viewWidth

SCALE_FACTOR)

2这里用focusX是确定左边界的位置。

后面参数计算和前面差不多这里我不重复解释。

不过写到这里还不算完成。

为了防止越界这里还需要做一次矫正防护

防止越界

Paint(Paint.ANTI_ALIAS_FLAG);clipPath

new

false;invalidate();}Overrideprotected

void

2f;clipPath.reset();clipPath.addCircle(viewHeight

2f,

/2,radius,Path.Direction.CCW);canvas.clipPath(clipPath);//

srcLeft

绘制放大内容canvas.drawBitmap(bitmap,

srcRect,

xmlns:androidhttp://schemas.android.com/apk/res/androidandroid:shapeovalstroke

android:color#abf4dbandroid:width1dp//shape上面的这个drawable

四、总结

一开始接到这个需求的时候我是真的有些懵因为以前从来没有写过。

不过后来在仔细拆分问题后觉的还是可以实现的。

这里我要着重感谢ChatGPT它给了我很大的帮助就比如这个功能的实现它就给了我思路就像老师一样能从它身上学到很多技能。

帮你做了你也必须要深入搞懂背后的原理要把知识吸收到自己大脑思维中否则未来你将会被AI取代