`

flex 地图编辑器之得到所菱形选中的数组下标

    博客分类:
  • game
阅读更多
package shape
{
	import flash.display.Shape;
	import flash.events.MouseEvent;
	import flash.geom.Point;
	
	import mx.controls.Alert;
	import mx.core.UIComponent;
	
	import nod.Node;

	public class MapShape extends UIComponent
	{
		
		public  var col:int=15;
		public  var row:int=10;
		public  var tileWidth:int=60;
		public  var tileHeight:int=30;
		
		public var arr:Array=new Array;
		
		public function MapShape()
		{
			super();
			draw();
			addEvent();
		}
		//一列一列的画
		public function draw():void{
			var w:int=tileWidth/2;
			var h:int=tileHeight/2;
			for(var i:uint=0;i<col;i++){
				arr[i]=new Array;	
				for(var j:uint=0;j<row;j++){
//					if(i%2!=0){
						//2个2个的画
						//先画一个
						var sh1:Shape=new Shape;
						this.graphics.beginFill(0x486235);
//						this.graphics.lineStyle(1,0x656545);
						
						//step1 i左边
						this.graphics.moveTo(i*tileWidth,j*tileHeight+h);
						// 上边
						this.graphics.lineTo(i*tileWidth+w,j*tileHeight);
						//右边
						this.graphics.lineTo((i+1)*(tileWidth),j*tileHeight+h);
						//下边
						this.graphics.lineTo(i*tileWidth+w,(j+1)*(tileHeight));
						//回到左边
						this.graphics.lineTo(i*tileWidth,j*tileHeight+h);
						this.graphics.endFill();
						var node:Node=new Node();
						node.x=i;
						node.y=j*2;
						node.point=new Point(i*tileWidth,j*tileHeight+h);
						arr[i][j*2]=node;
						
//					}else{
						//然后 右移半个菱形宽
						//下移半个菱形高, 效果就是
						var sh2:Shape=new Shape
						this.graphics.beginFill(0xff0000);
//						
						//step1 i左边
						this.graphics.moveTo(i*tileWidth+w,j*tileHeight+h+h);
						// 上边
						this.graphics.lineTo(i*tileWidth+w+w,j*tileHeight+h);
						//右边
						this.graphics.lineTo((i+1)*(tileWidth)+w,j*tileHeight+h+h);
						//下边
						this.graphics.lineTo(i*tileWidth+w+w,(j+1)*(tileHeight)+h);
						//回到左边
//						this.graphics.lineTo(i*tileWidth,j*tileHeight+h);
						this.graphics.endFill();
						
						
						var nd:Node=new Node();
						nd.x=i;
						nd.y=j*2+1;
						nd.point=new Point(i*tileWidth+w,j*tileHeight+h+h);
						arr[i][(j*2)+1]=nd;
						
//					}
				}
			}
			
		}
		public function addEvent(){
			this.addEventListener(MouseEvent.CLICK,onClick);
		}
		public function onClick(event:MouseEvent){
			var mx:int=mouseX;
			var my:int=mouseY;
//			
//			 drawBox(event.target.point);
//			  var N:int=int(mx/tileWidth - my/tileHeight)
//            var M:int=int(mx/tileWidth + my/tileHeight);
//            mx.controls.Alert.show("N:"+N+"  M:"+M);
//			 Alert.show(arr[0].length+"");
//			 drawBox(XY2grid(mx,my));
			var p:Point=getCellPoint(this.tileWidth,this.tileHeight,mx,my);
			mx.controls.Alert.show("x:"+p.x+"y:"+p.y);
			drawBox(arr[p.x][p.y].point);
		}
		
		public function drawBox(start:Point):void{
			this.graphics.beginFill(0xf0000);
			var fx:int=start.x;
			var fy:int=start.y;
			this.graphics.moveTo(start.x,start.y); //左
			this.graphics.lineTo(fx+tileWidth/2,fy-tileHeight/2); //上
			this.graphics.lineTo(fx+tileWidth,fy);
			this.graphics.lineTo(fx+tileWidth/2,fy+tileHeight/2);
			
			this.graphics.endFill();
			
			trace("fill");
		}
//	//根据屏幕像素去得网格坐标 jr的mapEdit方法
	//最重要的方法,没看什么意思
     public function getCellPoint(tileWidth:int, tileHeight:int, px:int, py:int):Point
		{
			var xtile:int = 0;	//网格的x坐标
			var ytile:int = 0;	//网格的y坐标
			
	        var cx:int, cy:int, rx:int, ry:int;
	        cx = int(px / tileWidth) * tileWidth + tileWidth/2;	//计算出当前X所在的以tileWidth为宽的矩形的中心的X坐标
	        cy = int(py / tileHeight) * tileHeight + tileHeight/2;//计算出当前Y所在的以tileHeight为高的矩形的中心的Y坐标
	
	        rx = (px - cx) * tileHeight/2;
	        ry = (py - cy) * tileWidth/2;
	
	        if (Math.abs(rx)+Math.abs(ry) <= tileWidth * tileHeight/4)
	        {
				//xtile = int(pixelPoint.x / tileWidth) * 2;
				xtile = int(px / tileWidth);
				ytile = int(py / tileHeight) * 2;
	        }
	        else
	        {
				px = px - tileWidth/2;
				//xtile = int(pixelPoint.x / tileWidth) * 2 + 1;
				xtile = int(px / tileWidth) + 1;
				
				py = py - tileHeight/2;
				ytile = int(py / tileHeight) * 2 + 1;
			}

			return new Point(xtile - (ytile&1), ytile);
		}
//
//		

}
}

  mxml代码

 

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:shape="shape.*">
	<shape:MapShape>
		
	</shape:MapShape>
</mx:Application>

 

 

分享到:
评论

相关推荐

    flex 地图编辑器源码

    《深入探索Flex地图编辑器源码:以ImmortalMapEdit、GPKits和GhostCat为例》 在IT行业中,地图编辑器是地理信息系统(GIS)的重要组成部分,它允许用户创建、修改和管理地理数据。本篇文章将聚焦于基于Flex技术的...

    flex制作的网游地图编辑器代码

    【标题】:“flex制作的网游地图编辑器代码” 在游戏开发领域,地图编辑器是用于创建游戏场景的重要工具,尤其对于网络游戏来说,地图编辑器可以让开发者高效地构建虚拟世界。本资源聚焦于使用Adobe Flex技术制作的...

    Flex 作的2D地图编辑器源码

    在这个2D地图编辑器中,Flex的这些特性得到了充分的应用,使得地图编辑过程更加直观和高效。 首先,我们来看看这个编辑器的核心功能。通过ActionScript编程,地图编辑器实现了基本的拖放功能,允许开发者在二维平面...

    Flex地图编辑技术

    Flex地图编辑技术主要...综上所述,Flex地图编辑技术是将Flex的交互能力与ArcGIS Server的强大GIS功能结合,实现地图的在线编辑。通过深入理解和实践,开发者可以构建出高效、易用的GIS应用,满足各种地图编辑需求。

    FLEX 图文编辑器(FLEX HTML编辑器)

    FLEX图文编辑器是一款基于Adobe Flex技术构建的富文本编辑工具,特别强调了对图文混合编辑的支持。它允许用户在编辑环境中自由组合文本和图像,提供了类似Word的功能,如复制粘贴,使得内容创建更加便捷。这款编辑器...

    flex特效编辑器 开发flex游戏的利器

    Flex特效编辑器是一款专为开发基于Adobe Flex技术的游戏而设计的强大工具。它简化了特效的创建过程,使得开发者能够更加高效地构建具有视觉冲击力的游戏体验。Flex是一种开放源码的框架,主要用于构建富互联网应用...

    flex mmorpg 地图编辑器demo

    《Flex MMO RPG地图编辑器Demo详解》 在游戏开发领域,地图编辑器是不可或缺的工具,它能够帮助开发者快速创建和编辑游戏世界。本篇将深入探讨一款基于Flex技术的大型多人在线角色扮演游戏(MMORPG)地图编辑器的...

    Flex图文编辑器(FLEX HTML编辑器)汉化版.rar

    Flex图文编辑器(FLEX HTML编辑器)汉化版.rar Flex图文编辑器(FLEX HTML编辑器)汉化版.rar Flex图文编辑器(FLEX HTML编辑器)汉化版.rar Flex图文编辑器(FLEX HTML编辑器)汉化版.rar

    Flex/Flash实现的地图编辑器源码

    《Flex/Flash实现的地图编辑器源码解析与应用》 在Web开发领域,尤其是在游戏制作中,地图编辑器是至关重要的工具。它允许开发者创建、修改和管理游戏世界的虚拟环境,为玩家提供丰富的游戏体验。本文将深入探讨一...

    flex 图片编辑器

    Flex 图片编辑器是一种基于Adobe Flex技术开发的图像处理工具,允许用户在Web环境中进行图片的编辑、调整和修饰。Flex是Adobe推出的一种用于构建富互联网应用(RIA)的开源框架,它基于ActionScript编程语言和MXML...

    flex 样式编辑器

    可视的flex控件样式编辑器,不用写代码,把样式改成你喜欢的样式,复制代码就可以了

    flex 数组排序

    ### Flex 数组排序知识点 #### 一、简介 在Flex开发中,经常需要对数组进行排序,特别是当处理复杂的二维数组或对象数组时。本文将详细介绍如何使用Flex中的`sortOn`方法对数组进行排序,并给出具体的代码示例。 ...

    flex 地图flex 地图flex 地图flex 地图flex 地图flex 地图flex 地图

    flex 地图flex 地图flex 地图flex 地图flex 地图flex 地图flex 地图flex 地图flex 地图flex 地图flex 地图flex 地图flex 地图flex 地图flex 地图flex 地图flex 地图flex 地图flex 地图flex 地图flex 地图flex 地图...

    flex 文字编辑器

    Flex 文字编辑器是一款基于Adobe Flex技术开发的富文本编辑工具,主要应用于Web应用程序中,为用户提供一个可自定义、功能丰富的文字处理环境。Flex是一个开源的用户界面框架,使用ActionScript编程语言和MXML标记...

    Flex图片编辑器

    这是我刚入公司的时候用Flex做的一个Web嵌入型图片编辑器,绝对能用,涉及服务端以及JS交互的代码需要自行补全,服务端交互返回数据均为JSON形式。功能包括,本地图片载入、网络图片载入、线条,圆,方形,椭圆,...

    flex 地图开发demo

    1. **Flex SDK**: Flex Software Development Kit提供了创建Flex应用程序所需的所有工具,包括编译器、IDE(如Flash Builder)和Flex框架库。开发者可以使用MXML和ActionScript来构建用户界面。 2. **ArcGIS API ...

    flex工作流程编辑器

    Flex工作流程编辑器是一款专为开发人员设计的强大工具,它简化了基于Flex的工作流配置过程。Flex是一种由Adobe开发的开放源代码框架,主要用于构建富互联网应用程序(RIA),尤其是在使用ActionScript和MXML编程时。...

    flex地图编辑,可以设置障碍

    标题中的“flex地图编辑,可以设置障碍”暗示了这是一个允许用户在地图上添加和编辑障碍物的工具,这在游戏设计中尤为关键,因为障碍物可以增加游戏的挑战性和策略性。 描述中提到的“可以用来制作游戏地图,可以...

    FLEX地图应用教程

    【FLEX地图应用教程】 FLEX地图应用教程主要面向初学者,旨在介绍如何使用FLEX进行地图开发,并在地图上实现各种功能。本教程选择The Earthplayer API作为示例,该API支持LIVE、GOOGLE和51地图,提供了一个相对完善...

    Flex地图编辑技术交流

    本文档是关于Flex地图编辑的技术交流,可以提供参考

Global site tag (gtag.js) - Google Analytics