需要涉及到的问题
1. 通过两个点获取到包含在两点之间的所有节点(框选)
2. 整体拖拽(框选后的整体拖拽)
3. 只允许节点在限定范围内拖拽(不让被框选的节点拖出限定范围外)
通过两点获取包含在两点之间的节点:
首先得到Canvas(简称ca)的两个点坐标即beginPoint,endPoint。通过节点(简称n)的x,y能够获取到该节点的中心点,即centerX,centerY。
代码:
public function setSelectionNodes(beginPoint:Point, endPoint:Point):void
{
for each (var n:GBaseNode in _allNodes)
{
if (beginPoint.x < endPoint.x && beginPoint.y < endPoint.y)
{
if (n.centerX > beginPoint.x && n.centerY > beginPoint.y && n.centerX < endPoint.x && n.centerY < endPoint.y)
{
n.select();
selectedNodes.push(n);
}
}
if (beginPoint.x > endPoint.x && beginPoint.y > endPoint.y)
{
if (n.centerX > endPoint.x && n.centerY > endPoint.y && n.centerX < beginPoint.x && n.centerY < beginPoint.y)
{
n.select();
selectedNodes.push(n);
}
}
if (beginPoint.x < endPoint.x && beginPoint.y > endPoint.y)
{
if (n.centerX > beginPoint.x && n.centerY < beginPoint.y && n.centerX < endPoint.x && n.centerY > endPoint.y)
{
n.select();
selectedNodes.push(n);
}
}
if (beginPoint.x > endPoint.x && beginPoint.y < endPoint.y)
{
if (n.centerX < beginPoint.x && n.centerY > beginPoint.y && n.centerY < endPoint.y && n.centerX > endPoint.x)
{
n.select();
selectedNodes.push(n);
}
}
}
}
代码中分别处理的四种情况,即由
左上角向右下角拖拽、
右下角向左上角拖拽、
左下角向右上角拖拽、
右上角向左下角拖拽。
整拖
每个节点都有两个属性用于判定当前坐标,即selectionXOffset和selectionYOffset,在选中节点后,点击一个被选中的节点,将此节点放入到一个新的变量_firstSelectedItem,通过此变量来判定其他节点的x,y坐标
var xOffset:Number=node.x;
var yOffset:Number=node.y;
for each (var baseNode:GBaseNode in this.selectedNodes)
{
if (baseNode == node)
{
continue;
}
else
{
baseNode.selectionXOffset=xOffset - baseNode.x;
baseNode.selectionYOffset=yOffset - baseNode.y;
}
}
view.addEventListener(Event.ENTER_FRAME, dragAllHandler);
在dragAllHandler中的处理函数如下:
private function dragAllHandler(e:Event):void
{
for each (var n:GBaseNode in this._selectedNodes)
{
if (n != _firstSelectedItem)
{
n.move(_firstSelectedItem.x - n.selectionXOffset, _firstSelectedItem.y - n.selectionYOffset);
}
}
}
限定范围内的拖拽,不仅仅是当选的节点的范围,还要考虑到整拖的时候不让其他节点也拖拽到边界外面去,因此,需要获得上下左右四个节点如图所示:
中间的节点是鼠标按下去的拖动节点,其他周边四个节点的移动则是参考了中间节点的坐标而移动的,为了不让节点在整体拖拽的时候被拖出工作区外,需要限定中间那个节点的拖拽范围。
if (view.isSelection && node.isSelected)
{
_firstSelectedItem=node;
//找到最左上角的节点
var leftNode:GBaseNode = findLeftNode();
trace("最左边的节点ID是:"+leftNode.itemId);
var topNode:GBaseNode = findTopNode();
trace("最上边的节点ID是:"+topNode.itemId);
var bottomNode:GBaseNode = findBottomNode();
trace("最下面的节点ID是:"+bottomNode.itemId);
var rightNode:GBaseNode = findRightNode();
trace("最右边的节点ID是:"+rightNode.itemId);
var lx:Number = node.x - leftNode.x;
var ly:Number = node.y - topNode.y;
var w:Number;
trace(_firstSelectedItem.itemId);
if(rightNode == _firstSelectedItem){
trace("1")
w = view.width - _firstSelectedItem.width - lx;
trace(_firstSelectedItem.itemId);
}else{
w = leftNode.x + (view.width - rightNode.x-rightNode.width);
}
var h:Number;
if(bottomNode == _firstSelectedItem){
trace("2");
h = view.height - _firstSelectedItem.height-ly;
}else{
h = topNode.y + (view.height - bottomNode.y - bottomNode.height);
}
trace(w,h);
node.startDrag(false, new Rectangle(lx,ly, w,h));
node.isDraging=true;
var xOffset:Number=node.x;
var yOffset:Number=node.y;
for each (var baseNode:GBaseNode in this.selectedNodes)
{
if (baseNode == node)
{
continue;
}
else
{
baseNode.selectionXOffset=xOffset - baseNode.x;
baseNode.selectionYOffset=yOffset - baseNode.y;
}
}
view.addEventListener(Event.ENTER_FRAME, dragAllHandler);
return;
}
其中findTopNode等类似函数,如下所示:
private function findTopNode():GBaseNode
{
var topNode:GBaseNode;
for each(var n:GBaseNode in _selectedNodes){
if(n == _firstSelectedItem){
continue;
}
var len:Number = _firstSelectedItem.y - n.y;
if(len >= 0)
{
if(topNode != null)
{
var len2:Number = _firstSelectedItem.y - topNode.y;
if(len2 >= 0)
{
if(len > len2)
{
topNode = n;
}
}
}else{
topNode = n;
}
}
}
if(topNode == null){
return _firstSelectedItem;
}
return topNode;
}
此处只是给出解决问题的方法,并没有指望您能看懂我写的代码,只希望你能看懂我的思路即可。也许你有更好的解决方案或者算法,还望赐教。
- 大小: 37.8 KB
分享到:
相关推荐
在ActinScript3.0中fscommand的实现全屏和退出以及关闭功能,这是实现了基本功能,很重要呀。
actionscript3国外教程,基础的游戏开发包含3D控制碰撞检测,三角函数,以及众多游戏开发基础
ActinScript 3.0将帮助你学习更顺畅
Matlab领域上传的视频均有对应的完整代码,皆可运行,亲测可用,适合小白; 1、代码压缩包内容 主函数:main.m; 调用函数:其他m文件;无需运行 运行结果效果图; 2、代码运行版本 Matlab 2019b;若运行有误,根据提示修改;若不会,私信博主; 3、运行操作步骤 步骤一:将所有文件放到Matlab的当前文件夹中; 步骤二:双击打开main.m文件; 步骤三:点击运行,等程序运行完得到结果; 4、仿真咨询 如需其他服务,可私信博主或扫描视频QQ名片; 4.1 博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作
源代码-BASISBBS最易ASP论坛 v1.0.7.zip
Matlab领域上传的视频均有对应的完整代码,皆可运行,亲测可用,适合小白; 1、代码压缩包内容 主函数:main.m; 调用函数:其他m文件;无需运行 运行结果效果图; 2、代码运行版本 Matlab 2019b;若运行有误,根据提示修改;若不会,私信博主; 3、运行操作步骤 步骤一:将所有文件放到Matlab的当前文件夹中; 步骤二:双击打开main.m文件; 步骤三:点击运行,等程序运行完得到结果; 4、仿真咨询 如需其他服务,可私信博主或扫描视频QQ名片; 4.1 博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作
华为大模型 华为2019创新大赛的工程文件+各种模型的backbone和tricks 华为2019创新大赛的工程文件+各种模型的backbone和tricks 华为2019创新大赛的工程文件+各种模型的backbone和tricks 华为2019创新大赛的工程文件+各种模型的backbone和tricks 华为2019创新大赛的工程文件+各种模型的backbone和tricks 华为2019创新大赛的工程文件+各种模型的backbone和tricks
【脑肿瘤检测】 GUI SOM脑肿瘤检测【含Matlab源码 2322期】
顾客满意度调查表.doc
Excel模板个人简历优雅简约单页30.docx
响应式web前段开发程序一书的所有源代码,PPT,课件,免费不要钱,有需要的下载即可,我是好人!给我点赞,让更多的大学生看见,大学生help大学生!
HC400-20标定版描述文件及标定版ps文件
【备注】 1.项目代码功能经验证ok,确保稳定可靠运行。欢迎下载使用!在使用过程中,如有问题或建议,请及时私信沟通。 2.主要针对各个计算机相关专业,包括计科、信息安全、数据科学与大数据技术、人工智能、通信、物联网等领域的在校学生、专业教师或企业员工使用。 3.项目具有丰富的拓展空间,不仅可作为入门进阶,也可直接作为毕设、课程设计、大作业、初期项目立项演示等用途。 4.当然也鼓励大家基于此进行二次开发。 5.期待你能在项目中找到乐趣和灵感,也欢迎你的分享和反馈! 光伏出力、风电出力基于skleran算法实现对光伏和风电输出进行准确预测Python源码+详细注释+报告.zip 光伏出力、风电出力基于skleran算法实现对光伏和风电输出进行准确预测Python源码+详细注释+报告.zip 光伏出力、风电出力基于skleran算法实现对光伏和风电输出进行准确预测Python源码+详细注释+报告.zip 光伏出力、风电出力基于skleran算法实现对光伏和风电输出进行准确预测Python源码+详细注释+报告.zip
【交通标志识别】 GUI BP神经网络雾霾天气交通标志识别(带面板)【含Matlab源码 1771期】
Matlab领域上传的视频均有对应的完整代码,皆可运行,亲测可用,适合小白; 1、代码压缩包内容 主函数:main.m; 调用函数:其他m文件;无需运行 运行结果效果图; 2、代码运行版本 Matlab 2019b;若运行有误,根据提示修改;若不会,私信博主; 3、运行操作步骤 步骤一:将所有文件放到Matlab的当前文件夹中; 步骤二:双击打开main.m文件; 步骤三:点击运行,等程序运行完得到结果; 4、仿真咨询 如需其他服务,可私信博主或扫描视频QQ名片; 4.1 博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作
STM32F103
Spring Boot 是一个开源的 Java 框架,用于简化 Spring 应用程序的初始搭建以及开发过程。它提供了许多默认配置,使得开发者能够更快速地构建应用。以下是一些 Spring Boot 的开发案例,这些案例展示了如何使用 Spring Boot 来构建不同类型的应用程序。 Web 应用程序: 博客系统:可以使用 Spring Boot 创建一个简单的博客系统,包括用户注册、登录、发布文章、评论等功能。利用 Spring Boot 的自动配置特性,可以快速搭建起一个 Web 服务器,并通过 Spring MVC 实现 RESTful API。 在线商店:Spring Boot 可以用来构建电商网站,包括商品展示、购物车、订单处理、支付集成等功能。
Node.js,简称Node,是一个开源且跨平台的JavaScript运行时环境,它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立,旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎,可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型,这使得它非常适合处理大量并发连接,从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外,Node.js使用了模块化的架构,通过npm(Node package manager,Node包管理器),社区成员可以共享和复用代码,极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展,它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等,因此,开发者可以用JavaScript编写全栈应用程序,这一点大大提高了开发效率和便捷性。 在实践中,许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台,如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能,简化了开发流程,并且能更快地响应市场需求。
从交易模式看游戏陪玩平台的运行逻辑(一).docx
产品属性检验记录表(注塑).xls