需要涉及到的问题
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
分享到:
相关推荐
在ActinScript编程环境中,`fscommand`是一个关键的命令,它允许ActionScript与外部应用程序进行交互,特别是在处理Flash(SWF)文件时。在标题和描述中提到的"在ActinScript中fscommand的实现全屏和退出以及关闭...
在AS3中,可以使用各种算法来实现这一点,例如轴对齐边界框(AABB)或分离轴定理(SAT)。有效的碰撞检测对于确保游戏逻辑的正确性至关重要,如角色移动、物体交互和得分计算。 三角函数在游戏开发中扮演着重要角色...
毕设和企业适用springboot企业健康管理平台类及活动管理平台源码+论文+视频.zip
本项目为基于layui框架开发的省市复选框组件设计源码,集成了115个文件,涵盖75个GIF动画、23个JavaScript脚本、6个CSS样式表、2个PNG图片、1个许可证文件、1个Markdown文档以及多种字体文件。该组件旨在提供一套便捷的省市多选解决方案,适用于各类需要地区选择的场景。
labview程序代码参考学习使用,希望对你有所帮助。
毕设和企业适用springboot社区服务类及互联网金融平台源码+论文+视频
毕设和企业适用springboot企业协作平台类及网络营销平台源码+论文+视频
毕设和企业适用springboot商城类及风险控制平台源码+论文+视频
立方体、球体、金字塔检测26-YOLO(v5至v11)、CreateML、Paligemma、TFRecord、VOC数据集合集.rarRobodog-V4 2023-06-21 11:41 PM ============================= *与您的团队在计算机视觉项目上合作 *收集和组织图像 *了解和搜索非结构化图像数据 *注释,创建数据集 *导出,训练和部署计算机视觉模型 *使用主动学习随着时间的推移改善数据集 对于最先进的计算机视觉培训笔记本,您可以与此数据集一起使用 该数据集包括255张图像。 立方体以创建格式注释。 将以下预处理应用于每个图像: *像素数据的自动取向(带有Exif-Arientation剥离) *调整大小为640x640(拉伸) 应用以下扩展来创建每个源图像的3个版本: * 0到4.75像素之间的随机高斯模糊 *将盐和胡椒噪声应用于5%的像素
毕设和企业适用springboot社交互动平台类及数据智能化平台源码+论文+视频
labview程序代码参考学习使用,希望对你有所帮助。
毕设和企业适用springboot人工智能类及企业数字资产管理平台源码+论文+视频
毕设和企业适用springboot社交互动平台类及跨境电商管理平台源码+论文+视频
毕设和企业适用springboot实验室类及文化旅游信息平台源码+论文+视频.zip
毕设和企业适用springboot汽车管理类及消费品管理平台源码+论文+视频
毕设和企业适用springboot实验室类及音频处理平台源码+论文+视频.zip
毕设和企业适用springboot企业数据管理平台类及直播流媒体平台源码+论文+视频
毕设和企业适用springboot企业云存储平台类及无人驾驶系统源码+论文+视频
labview程序代码参考学习使用,希望对你有所帮助。
labview程序代码参考学习使用,希望对你有所帮助。