LayaAir拖拽移动对象并吸附(附源码)

前言： 拖拽移动对象是2D休闲小游戏中常用的一个功能，典型代表例如《植物大战僵尸》中，种植植物的表现形式，拖拽植物卡片种植到相应的地点。今天介绍一下在Laya项目中实现这一功能。
该功能实现参照了：Egret拖拽对象与吸附 https://blog.csdn.net/u013617851/article/details/83867180

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

开发：

首先创建一个页面，页面上摆放好目标格子。我这边摆了9个，编号分别是 panel_00 ~panel_08。然后动态加载出来我们要拖拽的材料：

    initUI() {for (let i = 0; i < 3; i++) {let pd: ProductItem = new ProductItem(false);this.bottomGp.addChild(pd);}}

在拖拽开始的时候，在材料的位置实例化出来一个同样的材料对象，并且将坐标转化为世界坐标，并添加监听事件：

    private curTargetObj: ProductItem;private storeX: number; //拖拽对象的初始位置Xprivate storeY: number; //拖拽对象的初始位置Yprivate PointX: number = 100; //吸附点坐标Xprivate PointY: number = 100; //吸附点坐标Ypublic instantiatePro(obj: ProductItem, e) {this.curTargetObj = new ProductItem(true);this.curTargetObj.img_product.skin = obj.img_product.skin;this.curTargetObj.x = obj.localToGlobal(new Laya.Point()).x;this.curTargetObj.y = obj.localToGlobal(new Laya.Point()).y;this.onMoveBegin(e);this.initTargetObjBindEvent();this.addChild(this.curTargetObj);}private initTargetObjBindEvent() {this.curTargetObj.on(Laya.Event.MOUSE_MOVE, this, this.onMoving);this.curTargetObj.on(Laya.Event.MOUSE_UP, this, this.onMoveEnd);}private XTouch: number;private YTouch: number;private onMoveBegin(e): void {//Obj对象的坐标this.storeX = this.curTargetObj.x;this.storeY = this.curTargetObj.y;//想办法记录鼠标移动的记录的坐标this.XTouch = e.stageX;this.YTouch = e.stageY;}

在拖拽的过程中让实例化出来的对象跟随鼠标（手指）的移动而移动：

private onMoving(e): void {this.curTargetObj.x = this.storeX + (e.stageX - this.XTouch);this.curTargetObj.y = this.storeY + (e.stageY - this.YTouch);}

当移动到适当的位置后松开鼠标（手指），对象会搜索最近的格子所在的位置，并以缓动动画的形式吸附过去，如果停止的位置距离目标区域差距过大，则回到起始的位置，并自动销毁。

private onMoveEnd(): void {// 拖拽结束后，计算坐标let self = this;let closePoint: number = 0;//第几个point是最近的let closelen: number = 1000;//设定个阈值let zoneMin: number = 750;let zoneMax: number = 1150;let len: number = 0;if (self.curTargetObj.y < zoneMin || self.curTargetObj.y > zoneMax) {// 如果不满足吸附条件，就回到原来位置，并且销毁/this.PointX = this.storeX;this.PointY = this.storeY;Laya.timer.once(400, this, () => {this.curTargetObj.destroy();});} else {// 吸附到最近的地方for (let i: number = 0; i < 9; i++) {//两个Obj距离公式len = Math.sqrt(Math.pow((self["panel_0" + i].x - self.curTargetObj.x), 2) + Math.pow((self["panel_0" + i].y - self.curTargetObj.y), 2));   //Math.pow(2,4);表示2的4次方，等于16 ，Math.sqrt(x);if (len < closelen) {closelen = len;closePoint = i;}}this.PointX = this["panel_0" + closePoint].x + 50;  // 相对于目前的模块居中this.PointY = this["panel_0" + closePoint].y;}Laya.Tween.to(self.curTargetObj, { x: self.PointX, y: self.PointY }, 400, Laya.Ease.cubicOut);}

这里计算距离的公式实际上就是求两点之间直线距离的公式：

最后送上整个项目的打包源码：
LayaAir拖拽移动对象并吸附源码

如果这篇文章帮到了你，或者看完之后有了思路，那就给俺点个赞呗，可以让更多的人看到这篇文章，顺便激励下我，嘻嘻。

LayaAir拖拽移动对象并吸附(附源码)相关推荐

基于Matlab使用到达时差（TDOA）跟踪对象仿真（附源码）
目录一.介绍 1.1 TDOA 计算 1.2 TDOA 本地化二.跟踪单个发射器三.跟踪具有已知 ID 的多个发射器四.跟踪具有未知 ID 的多个发射器 4.1 使用到达时间 (TOA) 测量 ...
VC++如何将rc资源中的图片加载到MFC的CImage对象中（附源码）
VC++常用功能开发汇总(专栏文章列表,欢迎订阅,持续更新...)https://blog.csdn.net/chenlycly/article/details/124272585C++软件异常排查从 ...
实现可拖拽，拉伸，吸附功能的甘特图(时间/任务表)
最近应为业务需求需要开发一个任务调度后台,实现一个甘特图( 类似上学时候的课程表,'时间/课程/代课老师' 转换为: "时间/任务/执行人'").参考图片: 每一行的00:00到2 ...
读取xml文件转成ListT对象的两种方法（附源码）
读取xml文件转成List<T>对象的两种方法(附源码) 读取xml文件,是项目中经常要用到的,所以就总结一下,最近项目中用到的读取xml文件并且转成List<T>对象的方法, ...
使用Java实现发送微信消息（附源码）_此程序在手再也不怕对象跟你闹了
使用Java实现发送微信消息(附源码)_此程序在手再也不怕对象跟你闹了此程序在手再也不怕女朋友跟你闹了!!!!自从有了女朋友比如:早安.晚安之类的问候语可不能断,但是也难免有时候会忘记那么该咋么办呢 ...
百度离线地图示例之十三：动态运行轨迹实现(附源码)
前言介绍: 主要是基于v3.0的API版本进行的离线,纯内网可操作,基本上实现了现有90%以上的功能点,能兼容jpg和png格式的瓦片图层,实现了原生和基于Vue两个版本(包含常用的55个示例),文末 ...
用JavaScript实现网红太空人表盘（绝对详细、绝对原创），附源码下载
引言:网上最近太空人表盘很火,之前看到有个兄弟用svg写的,但是我也不会这个啊,我就琢磨着用canvas写了一个,效果感觉还不错,拿出来大家唠唠! 效果图: 思路分两个画布来绘制,画布1用来放置不动 ...
MultiRow发现之旅（六）- 使用MultiRow开发票据应用（附源码）
前文回顾 MultiRow发现之旅(一)- 高效模板设计器 MultiRow发现之旅(二)- 详解属性管理器 MultiRow发现之旅(三)- 模板管理器和Table MultiRow发现之旅(四)- ...
html制作好看的个人简历(附源码)
文章目录 1.设计来源 1.1 主界面 1.2 基本资料页面 1.3 个人名言页面 1.4 教育经历页面 1.5 联系方式页面 1.6 自我评价页面 1.7 工作经历页面 1.8 兴趣爱好页面 1.9 ...

LayaAir拖拽移动对象并吸附(附源码)

如果这篇文章帮到了你，或者看完之后有了思路，那就给俺点个赞呗，可以让更多的人看到这篇文章，顺便激励下我，嘻嘻。

LayaAir拖拽移动对象并吸附(附源码)相关推荐

最新文章

热门文章