白鹭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. 效果预览

\

\

\

\

相关推荐
谷宇.3 天前
【Unity3D实例-功能-移动】角色行走和奔跑的相互切换
游戏·unity·c#·unity3d·游戏开发·游戏编程
算家计算4 天前
一张图生成3A级游戏画面!腾讯混元全新开源Hunyuan-GameCraft
人工智能·开源·游戏开发
top_designer5 天前
游戏美术总监级工作流:Firefly AI赋能概念设计,从2D到3D重塑开发管线!
人工智能·游戏·3d·游戏开发·设计师·游戏美术·概念设计
张风捷特烈7 天前
匠心千游 | AI 从零开发 · 一笔画
前端·游戏开发·trae
大大花猫9 天前
为了重温儿时回忆,我用AI做了一个小游戏合集APP【附源码】
人工智能·ai编程·游戏开发
Kingsdesigner10 天前
游戏开发流程革命:我用Substance插件,在UE5内实现材质的实时“创世纪”
游戏·adobe·ue5·游戏引擎·游戏开发·设计师·substance 3d
南無忘码至尊11 天前
Unity编辑器工具:一键为场景中所有MeshRenderer对象添加指定脚本
unity·c#·游戏引擎·游戏开发
用户61204149221311 天前
C语言做的贪食蛇游戏(控制台版)
c语言·后端·游戏开发
谷宇.13 天前
【Unity3D实例-功能-镜头】第三人称视觉
游戏·unity·unity3d·游戏开发·游戏编程·steam
张风捷特烈13 天前
匠心千游 | 纯 AI 打造休闲小游戏
前端·微信小程序·游戏开发