[教程] 45度斜角编辑器制作教程（一）
http://bbs.9ria.com/viewthread.php?tid=74011&extra=page%3D1%26amp;orderby%3Ddateline%26amp;filter%3D2592000
这是一个写给新人的教程，我的预想是把涉及到得知识，经验一步步的写出来，呃，不说废话了，下面就开始该教程的第一步---45度坐标转换
请看下图
上图是一个以红色（0,0）位置为原点的UV坐标系示意图
从上图可以看出，U轴向每向上延伸出一个单位，原点坐标就会向下偏移 “1/2菱形格子高度” 的像素值
根据如上原理，我们可以得到下面的公式
假设我们定义
菱形格子宽度为 tileW:Number;
菱形格子高度为 tileH:Number;
U轴向格子数量为 uCount:int;
V轴向格子数量为 vCount:int;
原点坐标（屏幕坐标系） origin : Point;
那么
origin.x = 0；
origin.y = uCount * tileH/2；
原点我们求出来了，那么其它点（UV坐标系点）的坐标呢？
我的想法是 先求出在UV坐标系下每移动一个单位（U向或者V向）的X轴（屏幕坐标系）和Y轴（屏幕坐标系）的像素偏移量
例如
单位U向X轴偏移像素 = tileW / 2;（向右偏移）
单位U向Y轴偏移像素 = -tileH / 2;（向上偏移，所以为负值）
单位V向X轴偏移像素 = tileW / 2;（向右偏移）
单位V向Y轴偏移像素 = tileH / 2; （向下偏移，所以为正值）
假设有个UV点（u，v）它对应的XY坐标系点pos : Point
那么根据上述可以推导出如下公式
pos.x =原点坐标X+ 单位U向X轴偏移像素 * u + 单位V向X轴偏移像素 * v =origin.x + tileW / 2 * u + tileW / 2 * v = origin.x+ ( u + v) *tileW /2;
pos.y =原点坐标Y+ 单位U向Y轴偏移像素 * u + 单位V向Y轴偏移像素 * v = origin.y -tileH / 2* u + tileH / 2 * v = origin.y + (v - u) * tileH / 2;
好了，公式推导完了，下面要做的就是把公式封装起来，就像下面这样
MathTool.as
package com.mudMan.tools{ /** * @author 恋水泥人 */ public class MathTool { public function MathTool() { } /** * 获取像素点坐标 * @param _u U向坐标 * @param _v v向坐标 * @param _tw 网格宽 * @param _th 网格高 * @param _count 网格数量 * @return 像素点x,y坐标 * */ public static function getPixelPoint(_u:int,_v:int,_tw:int,_th:int,_count:int):Point { var org_x:Number = 0; var org_y:Number = _count * _th/2; var _x:Number = org_x + _tw/2 * (_u + _v); var _y:Number = org_y + _th/2 * (_u - _v); return new Point(_x,_y); } }} package com.mudMan.views{ import com.mudMan.tools.MathTool; import flash.display.Sprite; import flash.geom.Point; /** * @author 恋水泥人 */ public class MapGrids extends Sprite { public function MapGrids() { super(); } /** * 画菱形边框网格(整体也为菱形) * @param uCount U轴向网格个数 * @param vCount V轴向网格个数 * @param _tileW 网格宽 * @param _tileH 网格高 * @param _lineColor 网格颜色 * */ public function drawDiamond(_uCount:int, _vCount:int,_tileW:Number,_tileH:Number,_lineColor:uint = 0xff1212):void { graphics.lineStyle(1, _lineColor, 1); //U向坐标 var u:int; //V向坐标 var v:int; //线起始点像素坐标 var originPos:Point; //线途经点像素坐标 var lineToPos:Point; //沿V向画线 while(u <= _uCount) { v = 0; originPos = MathTool.getPixelPoint(u,v,_tileW,_tileH,_uCount); graphics.moveTo(originPos.x,originPos.y); while(v < _vCount) { ++v; lineToPos = MathTool.getPixelPoint(u,v,_tileW,_tileH,_uCount); graphics.lineTo(lineToPos.x,lineToPos.y); } ++u; } u = 0; v = 0; //沿U向画线 while(v <= _vCount) { u = 0; originPos = MathTool.getPixelPoint(u,v,_tileW,_tileH,_uCount); graphics.moveTo(originPos.x,originPos.y); while(u < _uCount) { ++u; lineToPos = MathTool.getPixelPoint(u,v,_tileW,_tileH,_uCount); graphics.lineTo(lineToPos.x,lineToPos.y); } ++v; } } }//end class}var mapGrid:MapGrids = new MapGrids(); mapGrid.drawDiamond(10,10,32,16); addChild(mapGrid);
