等角投影中，沒有消失點，觀察者的目光始終是平行的，投影方向與坐標軸的角度是固定值，雖然這樣看上去略有失真，但是總體來講立體感還是很明顯的，重要的是：不管你把等角投影所形成的立體圖形放在屏幕上哪一個位置，看上去都是相同的。
原書作者還給出了一個演示，用於幫助大家理解：在線演示
很明顯：一個立方體的（正方形）頂部面，在經過等角投影后，在屏幕上會發生形變，成為一個菱形。(點擊剛才的在線演示中的true isometric按鈕，觀察front視圖中立方體的頂部)
上圖是正方形經過標准等角投影后得到的菱形，其左右側的角度為60度，通過計算可以得到長寬比例為1.73，但是這個比例通常在計算時，會弄出很多小數位，而且繪圖師們也比較煩這個比例(因為用ps等軟件畫圖時，同樣也要設置長或寬為小數位才能保證這個比例)
所以在實際情況中，更常用的是"二等角"來代替"等角"(點擊剛才的在線演示中的dimetric按鈕，觀察front視圖中立方體的頂部)
可以看出，“二等角投影”形成的菱形要比“等角投影”更扁一些，但這種圖形的寬/高比例正好是2，處理起來很方便，也好記憶。
有了上面這些基礎，就可以來做些正經事兒了，思考一個問題：在常規3D空間中的圖形，經過二等角投影(為方便起見，以下把二等角投影也通稱為等角投影)后，要經過怎樣的計算（或轉換），才能得到最終的圖形呢？
有鑒於任何幾何圖形，總是由若干個點連接而成的，我們先來定義一個常規的Point3D類：
|
1
2
3
4
5
6
7
8
9
10
11
12
|
package
{
public
class
Point3D {
public
var
x:
Number
;
public
var
y:
Number
;
public
var
z:
Number
;
public
function
Point3D(x:
Number
=
0
,y:
Number
=
0
,z:
Number
=
0
) {
this
.x=x;
this
.y=y;
this
.z=z;
}
}
}
|
所以上面的問題也可以簡化為：等角空間中3D坐標點，如何轉換為電腦屏幕上的2D坐標點？(或者反過來轉換？)
轉化公式：
x1 = x - z
y1 = y * 1.2247 + (x + z) * 0.5
z2 = (x + z) * 0.866 - y * 0.707 --用於層深排序，可以先不管
上面的公式可以把等角空間中的坐標點，轉化為屏幕空間上的坐標點。(好奇心強烈的童鞋們，自己去看原書上的推導過程吧，我建議大家把這它當成定理公式記住就好，畢竟我們不是在研究數學)
為了方便以后重用，可以把這個公式封裝到類IsoUtil.as里
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
package
{
import
flash.geom.Point;
public
class
IsoUtils {
//public static const Y_CORRECT:Number=Math.cos(- Math.PI/6)*Math.SQRT2;
public
static
const
Y_CORRECT:
Number
=
1.2247448713915892
;
//把等角空間中的一個3D坐標點轉換成屏幕上的2D坐標點
public
static
function
isoToScreen(pos:Point3D):Point {
var
screenX:
Number
=pos.x-pos.z;
var
screenY:
Number
=pos.y*Y_CORRECT+(pos.x+pos.z)*
0.5
;
return
new
Point(screenX,screenY);
}
//把屏幕上的2D坐標點轉換成等角空間中的一個3D坐標點
public
static
function
screenToIso(point:Point):Point3D {
var
xpos:
Number
=point.y+point.x*.
5
;
var
ypos:
Number
=
0
;
var
zpos:
Number
=point.y-point.x*.
5
;
return
new
Point3D(xpos,ypos,zpos);
}
}
}
|
用代碼來畫一個等角圖形，測試上面的代碼是否正確
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
|
package
{
import
flash.display.Sprite;
import
flash.display.StageAlign;
import
flash.display.StageScaleMode;
import
flash.geom.Point;
[SWF(backgroundColor=
0xefefef
,height=
"200"
,width=
"300"
)]
public
class
IsoTransformTest
extends
Sprite {
public
function
IsoTransformTest() {
stage.align=StageAlign.TOP_LEFT;
stage.scaleMode=StageScaleMode.NO_SCALE;
var
p0:Point3D=
new
Point3D(
0
,
0
,
0
);
var
p1:Point3D=
new
Point3D(
100
,
0
,
0
);
var
p2:Point3D=
new
Point3D(
100
,
0
,
100
);
var
p3:Point3D=
new
Point3D(
0
,
0
,
100
);
var
sp0:Point=IsoUtils.isoToScreen(p0);
var
sp1:Point=IsoUtils.isoToScreen(p1);
var
sp2:Point=IsoUtils.isoToScreen(p2);
var
sp3:Point=IsoUtils.isoToScreen(p3);
var
tile:Sprite =
new
Sprite();
tile.x=
150
;
tile.y=
50
;
addChild(tile);
tile.graphics.lineStyle(
0
);
tile.graphics.moveTo(sp0.x, sp0.y);
tile.graphics.lineTo(sp1.x, sp1.y);
tile.graphics.lineTo(sp2.x, sp2.y);
tile.graphics.lineTo(sp3.x, sp3.y);
tile.graphics.lineTo(sp0.x, sp0.y);
trace
(Math.cos(- Math.PI/
6
)*Math.SQRT2);
//1.2247448713915892
trace
(tile.width,tile.height);
//200 100 符合上面提到的2:1
}
}
}
|