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>