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地图编辑器源码:以ImmortalMapEdit、GPKits和GhostCat为例》 在IT行业中,地图编辑器是地理信息系统(GIS)的重要组成部分,它允许用户创建、修改和管理地理数据。本篇文章将聚焦于基于Flex技术的...
【标题】:“flex制作的网游地图编辑器代码” 在游戏开发领域,地图编辑器是用于创建游戏场景的重要工具,尤其对于网络游戏来说,地图编辑器可以让开发者高效地构建虚拟世界。本资源聚焦于使用Adobe Flex技术制作的...
在这个2D地图编辑器中,Flex的这些特性得到了充分的应用,使得地图编辑过程更加直观和高效。 首先,我们来看看这个编辑器的核心功能。通过ActionScript编程,地图编辑器实现了基本的拖放功能,允许开发者在二维平面...
Flex地图编辑技术主要...综上所述,Flex地图编辑技术是将Flex的交互能力与ArcGIS Server的强大GIS功能结合,实现地图的在线编辑。通过深入理解和实践,开发者可以构建出高效、易用的GIS应用,满足各种地图编辑需求。
FLEX图文编辑器是一款基于Adobe Flex技术构建的富文本编辑工具,特别强调了对图文混合编辑的支持。它允许用户在编辑环境中自由组合文本和图像,提供了类似Word的功能,如复制粘贴,使得内容创建更加便捷。这款编辑器...
Flex特效编辑器是一款专为开发基于Adobe Flex技术的游戏而设计的强大工具。它简化了特效的创建过程,使得开发者能够更加高效地构建具有视觉冲击力的游戏体验。Flex是一种开放源码的框架,主要用于构建富互联网应用...
《Flex MMO RPG地图编辑器Demo详解》 在游戏开发领域,地图编辑器是不可或缺的工具,它能够帮助开发者快速创建和编辑游戏世界。本篇将深入探讨一款基于Flex技术的大型多人在线角色扮演游戏(MMORPG)地图编辑器的...
Flex图文编辑器(FLEX HTML编辑器)汉化版.rar Flex图文编辑器(FLEX HTML编辑器)汉化版.rar Flex图文编辑器(FLEX HTML编辑器)汉化版.rar Flex图文编辑器(FLEX HTML编辑器)汉化版.rar
《Flex/Flash实现的地图编辑器源码解析与应用》 在Web开发领域,尤其是在游戏制作中,地图编辑器是至关重要的工具。它允许开发者创建、修改和管理游戏世界的虚拟环境,为玩家提供丰富的游戏体验。本文将深入探讨一...
Flex 图片编辑器是一种基于Adobe Flex技术开发的图像处理工具,允许用户在Web环境中进行图片的编辑、调整和修饰。Flex是Adobe推出的一种用于构建富互联网应用(RIA)的开源框架,它基于ActionScript编程语言和MXML...
可视的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 文字编辑器是一款基于Adobe Flex技术开发的富文本编辑工具,主要应用于Web应用程序中,为用户提供一个可自定义、功能丰富的文字处理环境。Flex是一个开源的用户界面框架,使用ActionScript编程语言和MXML标记...
这是我刚入公司的时候用Flex做的一个Web嵌入型图片编辑器,绝对能用,涉及服务端以及JS交互的代码需要自行补全,服务端交互返回数据均为JSON形式。功能包括,本地图片载入、网络图片载入、线条,圆,方形,椭圆,...
1. **Flex SDK**: Flex Software Development Kit提供了创建Flex应用程序所需的所有工具,包括编译器、IDE(如Flash Builder)和Flex框架库。开发者可以使用MXML和ActionScript来构建用户界面。 2. **ArcGIS API ...
Flex工作流程编辑器是一款专为开发人员设计的强大工具,它简化了基于Flex的工作流配置过程。Flex是一种由Adobe开发的开放源代码框架,主要用于构建富互联网应用程序(RIA),尤其是在使用ActionScript和MXML编程时。...
标题中的“flex地图编辑,可以设置障碍”暗示了这是一个允许用户在地图上添加和编辑障碍物的工具,这在游戏设计中尤为关键,因为障碍物可以增加游戏的挑战性和策略性。 描述中提到的“可以用来制作游戏地图,可以...
【FLEX地图应用教程】 FLEX地图应用教程主要面向初学者,旨在介绍如何使用FLEX进行地图开发,并在地图上实现各种功能。本教程选择The Earthplayer API作为示例,该API支持LIVE、GOOGLE和51地图,提供了一个相对完善...
本文档是关于Flex地图编辑的技术交流,可以提供参考