CreateJs的拖拽、碰撞检测函数封装

create的拖拽函数和原生有一定的区别，在对原件进行拖拽的时候边界检测可能出现问题，对此封装了一套函数

function Drag(obj,parentNode){this.el = obj;if(arguments.length == 1){this.pWidth = stage.canvas.width;this.pHeight = stage.canvas.height;  }else{}this.mousedown = function(e){this.disX = e.stageX - e.target.parent.x;this.disY = e.stageY - e.target.parent.y;this.oWidth = e.target.parent.getBounds().width;this.oHeight = e.target.parent.getBounds().height;//阻止冒泡时间// ev.stopPropagation ? ev.stopPropagation() : ev.cancelBubble = true;this.el.addEventListener('pressmove',this.pressmove.bind(this))this.el.addEventListener('pressup',this.pressup.bind(this))}this.pressmove = function (e){var x = e.stageX - this.disX;var y = e.stageY - this.disY;//左侧if(x <=this.oWidth/2){x =this.oWidth/2;};//右侧if(x >= this.pWidth - this.oWidth/2){x = this.pWidth - this.oWidth/2};//上面if(y <= this.oHeight/2){y = this.oHeight/2 };//下面if(y >= this.pHeight - this.oHeight/2){y = this.pHeight - this.oHeight/2};e.target.parent.x = x;e.target.parent.y = y;}this.pressup =function(){this.el.removeEventListener('pressmove',this.pressmove)this.el.removeEventListener('pressup',this.pressup)}this.init=function(){this.el.addEventListener('mousedown',this.mousedown.bind(this))}
}

注意：如果要用e.tagrget.x是相对于自己的位置变动，虽然拖拽效果不会变，但是边界检测会十分麻烦，

而e.target.parent.x是自己相对于父元素的位置的元素移动，缺点是如果多层级的情况下边界检测也比较麻烦

使用方法：

var drag = new Drag(rule);
drag.init()

碰撞检测函数封装：

function CollisionTest(ele1,ele2){var w1 = ele1.getBounds().widthvar h1 = ele1.getBounds().heightvar w2 = ele2.getBounds().widthvar h2 = ele2.getBounds().heightvar x1 = ele1.x-w1/2;var x2 = ele1.x+w1/2;var y1 = ele1.y-h1/2;var y2 = ele1.y+h1/2;var x3 = ele2.x-w2/2;var x4 = ele2.x+w2/2;var y3 = ele2.y-h2/2;var y4 = ele2.y+h1/2;//x轴重叠检测var collX,collYconsole.log(x1,x2,x3,x4)if( (x3>x1&&x3<x2) || (x4>x1&&x4<x2) ){collX = true;}else{collX = false;}if( (y3>y1&&y3<y2) || (y4>y1&&y4<y2) ){collY = true;}else{collY = false;}return collX && collY
}

使用：

CollisionTest(ele1,ele2)

CreateJs的拖拽、碰撞检测函数封装相关推荐

sortable 拖拽时互换目标的位置_双端通用型JS拖拽插件的封装与应用
最近工作中遇到一个需求,需要将一个元素从某位置拖动到另一固定位置后执行某一交互行为,具体效果如下: 这个看似简单的需求,然而实现起来却并不那么顺利.我首先想到的是如何通过哪个现有的插件来快速解决这个问 ...
原生js实现QQ邮箱邮件拖拽删除功能
步骤分析: 根据数据结构生成HTML结构全选和单选功能的实现,以及当其为选中状态时它的父级的颜色变化的点击删除,删除结构同时删除数据给每一个li绑定mousedown,tip显示,并且定位在鼠标 ...
Web前端JavaScript笔记（5）事件-拖拽
阻止默认行为和超链接在浏览器上运行网页后,右击会弹出菜单,这属于浏览器的默认行为.如何禁止这一默认行为: <script>window.onload = function () {doc ...
JS中鼠标拖拽div（2）（setCapture()方法和releaseCapture()方法）
接着鼠标拖拽div(1)解决问题,当在拖拽事件所在的页面按下键盘的ctrl+A全选后,再去拖拽div,浏览器会默认去搜索网页中的内容,拖拽功能就会失效,(搜索网页内容是浏览器的默认行为,所以要想不发生 ...
antd modal 拖动_antd的Modal可移动（可拖拽）
通过第三方插件实现使用方法: npm install dragm -S 2.安装后运行如果出现缺少.less,则在命令行>yarn install(或直接运行 yarn),然后再运行 3.新建 ...
jquery 磁铁模式控件_利用JQuery拖拽插件实现拖拽效果
asp教程x.cs" inherits="jquerydrag._default" %> $(document).ready(function() { //拖拽方法 ...
开心截图，拖拽大作战
加这个div, up 事件就必须绑定给document ,否则会出现问题! 版本2 : 版本3 : 是正按下ctrl + a 再拖动的时候,会出现, 抖影子这个解决办法,也是有兼容问题,我就不写了, ...
QT上实现文件拖拽功能
转自于QT上实现文件拖拽功能声明dragEnterEvent和dropEvent事件函数,对窗口的拖拽行为进行处理 // 由MainWindow来截取拖拽事件 ①ui->lineEdit-&g ...
【JS案例】：实现盒子拖拽功能
JS小案例:实现盒子拖拽功能 HTML部分: <div id="box"></div> CSS部分: #box{width: 100px;height: 1 ...

CreateJs的拖拽、碰撞检测函数封装

CreateJs的拖拽、碰撞检测函数封装相关推荐

最新文章

热门文章