笔记十三：Egret拖拽对象与吸附对象（基于通用MVC框架）

前言：拖拽对象是2D游戏中常用的一个功能，例如《植物大战僵尸》中种植植物的表现形式，拖拽植物卡片种植到相应的地点。

思路：在Egret中实现拖拽对象，需要用到TOUCH_MOVE事件的监听，触摸移动触发TOUCH_MOVE，此时计算触摸移动的大小，让拖拽对象也进行相应的移动。

源代码：笔记十三 Egret拖拽对象与吸附对象

演示：

步骤一：基于通用MVC框架，快速建立一个基本界面。（参考笔记一，笔记十）

涉及到的文件：

\src\example\module\demo\draft\DraftView.ts

\src\example\module\demo\draft\DraftController.ts

\resource/skins/demo/draft/DraftSkin.exml

步骤二：界面文件中编写用来拖拽的objGroup（Group）以及6个用来吸附对象的point01-point06（Group）

文件：\resource/skins/demo/draft/DraftSkin.exml

     <e:Group id="gezi" width="496.97" height="736.36" x="56" y="57" anchorOffsetX="0" anchorOffsetY="0"><e:Group id="point01" width="218" height="94" x="300.17" y="556.71" anchorOffsetY="0"><e:Image right="0" bottom="0" left="0" top="0" source="border_png" /></e:Group><e:Group id="point02" width="218" height="94" x="-22.63" y="77.86" anchorOffsetY="0"><e:Image right="0" bottom="0" left="0" top="0" source="border_png" /></e:Group><e:Group id="point03" width="218" height="94" x="-22.62" y="323.5" anchorOffsetY="0"><e:Image right="0" bottom="0" left="0" top="0" source="border_png" /></e:Group><e:Group id="point04" width="218" height="94" x="301.72" y="324" anchorOffsetY="0"><e:Image right="0" bottom="0" left="0" top="0" source="border_png" /></e:Group><e:Group id="point05" width="218" height="94" x="-21.11" y="554.18" anchorOffsetY="0"><e:Image right="0" bottom="0" left="0" top="0" source="border_png" /></e:Group><e:Group id="point06" width="218" height="94" x="301.7" y="78.81" anchorOffsetY="0"><e:Image right="0" bottom="0" left="0" top="0" source="border_png" /></e:Group><e:Group id="objGroup" x="97" y="201" anchorOffsetX="0" anchorOffsetY="0"><e:Image source="table_activity" /></e:Group></e:Group>

步骤三：DraftView.ts中添加拖拽相关代码

打开\src\example\module\demo\draft\DraftView.ts

给拖拽对象加上TOUCH_BEGIN,TOUCH_MOVE,TOUCH_END三个监听事件：

    private objGroup:eui.Group; //拖拽的对象private storeX:number; //TOUCH_BEGIN时存储的拖拽对象位置Xprivate storeY:number; //TOUCH_BEGIN时存储的拖拽对象位置Yprivate PointX:number = 100; //吸附点坐标Xprivate PointY:number = 100; //吸附点坐标Y

    private initFirstObj(): void {this.objGroup.addEventListener(egret.TouchEvent.TOUCH_BEGIN, this.onTouchBegin, this);this.objGroup.addEventListener(egret.TouchEvent.TOUCH_MOVE, this.onTouchMove, this);this.objGroup.addEventListener(egret.TouchEvent.TOUCH_END, this.onTouchEnd, this);}

拖拽部分代码：

    private XTouch: number;private YTouch: number;private onTouchBegin(e: egret.TouchEvent): void {//Obj对象的坐标this.storeX = this.objGroup.x;this.storeY = this.objGroup.y;//想办法记录鼠标移动的记录的坐标this.XTouch = e.stageX;this.YTouch = e.stageY;}private onTouchMove(e: egret.TouchEvent): void {this.objGroup.x = this.storeX + (e.stageX - this.XTouch);this.objGroup.y = this.storeY + (e.stageY - this.YTouch);}

其中每次触摸事件开始，onTouchBegin分别记录拖拽对象的坐标，手指点击的坐标。每当触摸移动的时候，触发onTouchMove函数，手指触摸移动了多少距离，拖拽对象移动同样的距离。

吸附部分代码：

    private onTouchEnd(): void {//console.log("xxxxxxendxxxxx");//松开手了吸附到最近的地方//计算最近的坐标let self = this;let closePoint:number = 0;//第几个point是最近的let closelen:number = 1000;//设定个最高值let len:number = 0;for(let i:number=1;i<=6;i++){//两个Obj距离公式len = Math.sqrt(Math.pow((self["point0"+i].x - self.objGroup.x),2) + Math.pow((self["point0"+i].y - self.objGroup.y),2));   //Math.pow(2,4);表示2的4次方，等于16 ，Math.sqrt(x);if(len < closelen){closelen = len;closePoint = i;}}console.log("算出来的Len和i分别为",len," self[point0+i].x=",self["point0"+5].x);this.PointX = this["point0"+closePoint].x;this.PointY = this["point0"+closePoint].y;let Tween = egret.Tween.get(self.objGroup).to({x:self.PointX,y:self.PointY},400,egret.Ease.cubicOut);}

触摸松开的时候，触发onTouchEnd()函数，分别计算推拽对象与6个吸附点的距离，公式：(x^2+y^2)^(1/2),并找到最短的距离，利用Tween动画，使得拖拽对象移动到最近吸附点的位置。

步骤四：测试

笔记十三：Egret拖拽对象与吸附对象（基于通用MVC框架）相关推荐

笔记十：快速建立基本界面 + Egret制作转盘效果（基于通用MVC框架）
前言: 快速基本界面的编写直接跳到步骤二. 转盘效果是对egret白鹭引擎动画的功能进行一次应用,实现转盘效果可以对动画功能更好的理解,游戏的随机奖励可以用转盘效果来进行表现. 源代码:笔记十Egre ...
笔记九：EgretH5通用MVC框架的操作：制作折叠菜单FoldList（UI部分）
前言:由于时间比较紧,这次的博客更偏向笔记性质,而不是教程性质,必须打开源代码,接着再一步一步参考以下的笔记,不然很多细节上的东西漏掉了运行时会出现不少问题. 源代码:笔记九Egret-折叠List源 ...
LayaAir拖拽移动对象并吸附(附源码)
前言: 拖拽移动对象是2D休闲小游戏中常用的一个功能,典型代表例如<植物大战僵尸>中,种植植物的表现形式,拖拽植物卡片种植到相应的地点.今天介绍一下在Laya项目中实现这一功能. 该功能实 ...
实现可拖拽，拉伸，吸附功能的甘特图(时间/任务表)
最近应为业务需求需要开发一个任务调度后台,实现一个甘特图( 类似上学时候的课程表,'时间/课程/代课老师' 转换为: "时间/任务/执行人'").参考图片: 每一行的00:00到2 ...
jquery 磁铁模式控件_利用JQuery拖拽插件实现拖拽效果
asp教程x.cs" inherits="jquerydrag._default" %> $(document).ready(function() { //拖拽方法 ...
vue拖动添加模块展示_一个全新的Vue拖拽特性实现：“移动”部分
关于拖拽 CabloyJS提供了完备的拖拽特性,可以实现移动和调整尺寸两大类功能,这里对移动的开发进行阐述关于调整尺寸的开发,请参见:拖拽:调整尺寸演示开发步骤下面以模块test-party为例 ...
EasyUI中放置Droppable的使用以及实现拖拽排序
场景效果实现 webapp下新建droppable文件夹,在其下新建basic.html <!DOCTYPE html> <html lang="en"> ...
Vue的v-for中列表项拖拽排序详细方法
首先:HTML中,关键点是监听拖拽的三个阶段,即:dragstart/dragover/dragend,注意:要拖拽元素必须加上draggable="true" <ul @d ...
html5拖拽图片批量ajax无刷新进度上传
1.前端拖拽图片之前有篇文章说到HTML5的拖拽(drag.drop,详见:/post/jquery-plugin-1-jquery-drag-and-html5-draggable-api-and ...

笔记十三：Egret拖拽对象与吸附对象（基于通用MVC框架）

笔记十三：Egret拖拽对象与吸附对象（基于通用MVC框架）相关推荐

最新文章

热门文章

笔记十三 ：Egret拖拽对象与吸附对象（基于通用MVC框架）

笔记十三 ：Egret拖拽对象与吸附对象（基于通用MVC框架）相关推荐

最新文章

热门文章

笔记十三：Egret拖拽对象与吸附对象（基于通用MVC框架）

笔记十三：Egret拖拽对象与吸附对象（基于通用MVC框架）相关推荐