Egret社区

菜鸟福音系列1 - 放大镜效果

2016-11-25 19:42
23048
本帖最后由 mysang 于 2016-11-28 19:36 编辑

老菜鸟带雏鸟们起飞。准备制作一系列初级应用教程,雏鸟们准备好。带你装B带你飞咯。

一、准备素材
素材.jpg
两张一样的图片?NO,当然不是。一张大图用来显示放大的效果,一张小图本来呈现的样子。一个放大镜的图片。
二、代码部分(这么快就代码部分了,是呀也没啥可写的了)
1、添加背景小图
[AppleScript] 纯文本查看 复制代码
                var smallBmp = new egret.Bitmap(RES.getRes("small_jpg"));
                this.addChild(smallBmp);

2、添加大图
[AppleScript] 纯文本查看 复制代码
                this._bigBmp = new egret.Bitmap(RES.getRes("big_jpg"));
                this.addChild(this._bigBmp);

3、计算大小图的宽高比
[AppleScript] 纯文本查看 复制代码
this.scale = this._bigBmp.width / smallBmp.width;

//由于在后面还需要调用 所以在外部设置成私有变量。
4、添加放大镜边框及位置、锚点的调整
var glassBmp = new egret.Bitmap(RES.getRes("glass_png"));
                this._container.addChild(glassBmp);
                glassBmp.x = -70;
                glassBmp.y = -70;[
5、关键的拖动步骤了(监听点击屏幕、离开屏幕、在屏幕上移动)
[AppleScript] 纯文本查看 复制代码
                this.addEventListener(egret.TouchEvent.TOUCH_BEGIN,this.touch_begin,this);
                this.addEventListener(egret.TouchEvent.TOUCH_MOVE,this.touch_move,this);
                this.addEventListener(egret.TouchEvent.TOUCH_END,this.touch_end,this);

6、分解动作
[AppleScript] 纯文本查看 复制代码
        private touch_begin(event:egret.TouchEvent)
        {
                this._touchStatus = true;//点击屏幕状态设为true
                this._container.x = event.stageX - 70;
                this._container.y = event.stageY -70;
        }
        private touch_end(event:egret.TouchEvent)
        {
                this._touchStatus = false;//离开屏幕状态设为false
        }
        private touch_move(event:egret.TouchEvent)
        {
                if(this._touchStatus)
                {
                        this._container.x = event.stageX -70;
                        this._container.y = event.stageY -70;
                        //公式(为什么这么写?不用纠结了先知道怎么用就好了。)
                        this._bigBmp.x = event.stageX * (this.scale - 1) * - 1 +70;
                        this._bigBmp.y = event.stageY * (this.scale - 1) * - 1 +70;
                }
        }

------------------------------华丽分割线-----------------------------------
放大镜效果.jpg
实际效果
放大镜.jpg
扫码看看

全部代码
[AppleScript] 纯文本查看 复制代码
class GameScene extends egret.DisplayObjectContainer
{
        private _circleShape:egret.Shape;
        private _bigBmp:egret.Bitmap;
        private scale:number;
        private _touchStatus:boolean = false;
        private _container:egret.Sprite;
        public constructor() 
        {
                super();
                this.Init();
                this.touchEnabled = true;
        }
        private Init()
        {
                var smallBmp = new egret.Bitmap(RES.getRes("small_jpg"));
                this.addChild(smallBmp);
                this._bigBmp = new egret.Bitmap(RES.getRes("big_jpg"));
                this.addChild(this._bigBmp);
                this.scale = this._bigBmp.width / smallBmp.width;
                this._container = new egret.Sprite();
                this.addChild(this._container)
                this._container.x = this._container.y = 300;
                var circleShape = new egret.Shape();
                circleShape.graphics.beginFill(0x000000);
                circleShape.graphics.drawCircle(0,0,70);
                circleShape.graphics.endFill();
                this._container.addChild(circleShape);
                this._bigBmp.mask = circleShape;
                var glassBmp = new egret.Bitmap(RES.getRes("glass_png"));
                this._container.addChild(glassBmp);
                glassBmp.x = -70;
                glassBmp.y = -70;

                this.addEventListener(egret.TouchEvent.TOUCH_BEGIN,this.touch_begin,this);
                this.addEventListener(egret.TouchEvent.TOUCH_MOVE,this.touch_move,this);
                this.addEventListener(egret.TouchEvent.TOUCH_END,this.touch_end,this);
        }
        private touch_begin(event:egret.TouchEvent)
        {
                this._touchStatus = true;
                this._container.x = event.stageX -70;
                this._container.y = event.stageY-70;
        }
        private touch_end(event:egret.TouchEvent)
        {
                this._touchStatus = false;
        }
        private touch_move(event:egret.TouchEvent)
        {
                if(this._touchStatus)
                {
                        this._container.x = event.stageX-70;
                        this._container.y = event.stageY-70;
                        this._bigBmp.x = event.stageX * (this.scale - 1) * - 1+70;
                        this._bigBmp.y = event.stageY * (this.scale - 1) * - 1+70;
                }
        }
}


看了上面的代码还是没做出来?好吧你确实Egret的全新生力军。加我QQ:3684235

最后写给雏鸟:对于雏鸟来说不要上来盲目的去看别人成型的源码,一脸茫然最后放弃。往往一些小程序才是带你步入正轨的最佳路径。无数小程序中的知识点汇集起来就是成为大神地基。今天的雏鸟就是明天的大神。即使你成为了别人眼中的大神也别骄傲。正所谓 大神莫装B 装B遭雷劈。




分享到 :
2 人收藏

8 个回复

倒序浏览
yjtx  官方团队 | 2016-11-28 09:58:11
写的不错,最后那张图~
爽哥V武  登堂入室 | 2016-11-28 13:23:59
赞一个先,不过扫码看了之后感觉,没有放大呀,感觉只是图片错位显示一下。。。
mysang  炉火纯青 | 2016-11-28 16:13:27
爽哥V武 发表于 2016-11-28 13:23
赞一个先,不过扫码看了之后感觉,没有放大呀,感觉只是图片错位显示一下。。。 ...

再试试 换了一张明显的图
爽哥V武  登堂入室 | 2016-11-28 17:29:06
mysang 发表于 2016-11-28 16:13
再试试 换了一张明显的图

嗯,很明显,原谅我不看代码先看效果
zhy  登堂入室 | 2016-11-28 17:36:16
给大神赞一个
1419664796  炉火纯青 | 2016-12-1 12:51:20
赞赞赞
trackway  略有小成 | 2017-2-17 15:11:23
图中这个放大镜的位置放的很到位。
赞同楼主的学习观点
天神仔  自成一派 | 2017-2-17 15:27:09
整篇文章最精彩的就是最后的效果图了
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|京网文[2014]0791-191号|京ICP证150115号|Egret社区 ( 京ICP备14025619号

Powered by Discuz! X3.2 © 2001-2019 Comsenz Inc.

返回顶部