`
andy_ghg
  • 浏览: 290957 次
  • 性别: Icon_minigender_1
  • 来自: 扬州
社区版块
存档分类
最新评论

ActinScript算法,拖拽、框选

    博客分类:
  • Flex
阅读更多
需要涉及到的问题
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
0
0
分享到:
评论

相关推荐

    在ActinScript中fscommand的实现全屏和退出以及关闭功能

    在ActinScript3.0中fscommand的实现全屏和退出以及关闭功能,这是实现了基本功能,很重要呀。

    actinscript3国外教程,翻译成中文

    actionscript3国外教程,基础的游戏开发包含3D控制碰撞检测,三角函数,以及众多游戏开发基础

    ActionScript

    ActinScript 3.0将帮助你学习更顺畅

    【图像融合】加权算法高分辨率和低分辨率图像融合(含清晰度)【含Matlab源码 4405期】.zip

    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

    源代码-BASISBBS最易ASP论坛 v1.0.7.zip

    【图像去噪】高斯滤波+均值滤波+中值滤波+双边滤波图像去噪(含信噪比)【含Matlab源码 2747期】.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 华为2019创新大赛的工程文件+各种模型的backbone和tricks

    【脑肿瘤检测】 GUI SOM脑肿瘤检测【含Matlab源码 2322期】.zip

    【脑肿瘤检测】 GUI SOM脑肿瘤检测【含Matlab源码 2322期】

    顾客满意度调查表.doc

    顾客满意度调查表.doc

    Excel模板个人简历优雅简约单页30.docx

    Excel模板个人简历优雅简约单页30.docx

    响应式web前段开发程序源代码

    响应式web前段开发程序一书的所有源代码,PPT,课件,免费不要钱,有需要的下载即可,我是好人!给我点赞,让更多的大学生看见,大学生help大学生!

    HC400-20标定版描述文件及标定版ps文件

    HC400-20标定版描述文件及标定版ps文件

    光伏出力、风电出力基于skleran算法实现对光伏和风电输出进行准确预测Python源码+详细注释+报告.zip

    【备注】 1.项目代码功能经验证ok,确保稳定可靠运行。欢迎下载使用!在使用过程中,如有问题或建议,请及时私信沟通。 2.主要针对各个计算机相关专业,包括计科、信息安全、数据科学与大数据技术、人工智能、通信、物联网等领域的在校学生、专业教师或企业员工使用。 3.项目具有丰富的拓展空间,不仅可作为入门进阶,也可直接作为毕设、课程设计、大作业、初期项目立项演示等用途。 4.当然也鼓励大家基于此进行二次开发。 5.期待你能在项目中找到乐趣和灵感,也欢迎你的分享和反馈! 光伏出力、风电出力基于skleran算法实现对光伏和风电输出进行准确预测Python源码+详细注释+报告.zip 光伏出力、风电出力基于skleran算法实现对光伏和风电输出进行准确预测Python源码+详细注释+报告.zip 光伏出力、风电出力基于skleran算法实现对光伏和风电输出进行准确预测Python源码+详细注释+报告.zip 光伏出力、风电出力基于skleran算法实现对光伏和风电输出进行准确预测Python源码+详细注释+报告.zip

    【交通标志识别】 GUI BP神经网络雾霾天气交通标志识别(带面板)【含Matlab源码 1771期】.zip

    【交通标志识别】 GUI BP神经网络雾霾天气交通标志识别(带面板)【含Matlab源码 1771期】

    【图像加密】 GUI混沌系统图像加密解密【含Matlab源码 147期】.zip

    Matlab领域上传的视频均有对应的完整代码,皆可运行,亲测可用,适合小白; 1、代码压缩包内容 主函数:main.m; 调用函数:其他m文件;无需运行 运行结果效果图; 2、代码运行版本 Matlab 2019b;若运行有误,根据提示修改;若不会,私信博主; 3、运行操作步骤 步骤一:将所有文件放到Matlab的当前文件夹中; 步骤二:双击打开main.m文件; 步骤三:点击运行,等程序运行完得到结果; 4、仿真咨询 如需其他服务,可私信博主或扫描视频QQ名片; 4.1 博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作

    stm32八路灰度循迹小车

    STM32F103

    Excel模板Github上10个值得学习的Springboot开发项目.pdf

    Spring Boot 是一个开源的 Java 框架,用于简化 Spring 应用程序的初始搭建以及开发过程。它提供了许多默认配置,使得开发者能够更快速地构建应用。以下是一些 Spring Boot 的开发案例,这些案例展示了如何使用 Spring Boot 来构建不同类型的应用程序。 Web 应用程序: 博客系统:可以使用 Spring Boot 创建一个简单的博客系统,包括用户注册、登录、发布文章、评论等功能。利用 Spring Boot 的自动配置特性,可以快速搭建起一个 Web 服务器,并通过 Spring MVC 实现 RESTful API。 在线商店:Spring Boot 可以用来构建电商网站,包括商品展示、购物车、订单处理、支付集成等功能。

    node-v0.9.6-x64.msi

    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

    从交易模式看游戏陪玩平台的运行逻辑(一).docx

    产品属性检验记录表(注塑).xls

    产品属性检验记录表(注塑).xls

Global site tag (gtag.js) - Google Analytics