白鹭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;

\

  1. 事件代码:

\

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

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

重要部分:移动事件:

\

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

  1. 效果预览

\

\

\

\

相关推荐
LeeAt13 小时前
《谁杀死了比尔?》:使用Trae完成的一个推理游戏项目!!
前端·游戏开发·trae
龙智DevSecOps解决方案14 小时前
游戏开发中的CI/CD优化案例:知名游戏公司Gearbox使用TeamCity简化CI/CD流程
ci/cd·游戏开发·jetbrains·teamcity
一名用户1 天前
unity实现自定义粒子系统
c#·unity3d·游戏开发
技术小甜甜3 天前
【Blender Texture】【游戏开发】高质感 Blender 4K 材质资源推荐合集 —— 提升场景真实感与美术表现力
blender·游戏开发·材质·texture
Thomas游戏开发3 天前
Unity3D TextMeshPro终极使用指南
前端·unity3d·游戏开发
Thomas游戏开发5 天前
Unity3D 逻辑代码性能优化策略
前端框架·unity3d·游戏开发
Thomas游戏开发6 天前
Unity3D HUD高性能优化方案
前端框架·unity3d·游戏开发
陈哥聊测试6 天前
游戏公司如何同时管好上百个游戏项目?
游戏·程序员·游戏开发
一名用户7 天前
unity随机生成未知符号教程
c#·unity3d·游戏开发
Be_Somebody12 天前
计算机图形学——Games101深度解析_第二章
游戏开发·计算机图形学·games101