白鹭Egret实现放大镜效果

注：这个效果是根据同事的博客实现的，感兴趣的可以去他博客看看 www.xrhoujie.com/blog/archiv...

首先说明，放大镜效果使用的是大小两张图片，不是单纯的将图片缩放；

1.素材准备，准备两张内容相同，大小不同的图片，（另外我加了一个放大镜的图片，感谢某位同事给予的PS支持，哈哈，）

将图片放置在项目的resource/assets/images目录下，如下：\

2.图片素材准备好之后，在项目配置文件resource/default.res.json中会自动将图片信息存储进来，方便使用，可自行设置图片信息（name/type）；

3.接下来就是coding改变世界的时候了，打开main.ts文件，

3.1 创建一个单色背景（我喜欢黑色）：\

3.2 然后将大小两张图片都创建添加进去：

注意：此处小图片我给它设置了位置信息，箭头所示，后续会用到。

3.3 定义一个scaleWH变量，存储大小两张图片的缩放比例：

3.4 接着创建一个放大镜容器和一个圆形遮罩：

3.5 再把同事帮P的金丝镶边的放大镜边框放进去：（此处图片资源glassBmp与步骤2中resource/default.res.json里边放大镜图片name值不同，调用时一定要设置成一样的）

3.6 设置监听事件，触摸执行touch_begin，触摸移动执行touch_move,触摸结束执行touch_end;

Boolean变量_touchStatus用以判断触摸是否开始，触摸时设置为true,触摸结束，设置为false;

根据鼠标点击位置给放大镜容器_container设置位置（-100和-40是我根据图片位置计算出来的，目的是让放大镜的镜片中心始终跟鼠标位置保持一致）\

重要部分：移动事件：

因为小图片我设置了初始位置（步骤3.2中箭头所示），所以此处应将触摸位置减去初始位置得出位置变量*大小图片缩放比例差*-1，最后再减去位置偏移量，计算出相对位置，从而实现放大镜效果。（此处跟据图片大小及位置变化不同，习性修改偏移量即可，需仔细揣摩）