從視窗到視口的對映
高中時我們學過垂直座標系和極座標系，同乙個點在不同的座標系裡的座標值是不一樣的，比如垂直座標系裡的(1, 1)
這個點，對應的極座標卻是（
1.414, 45
）。這兩個座標值可以通過一定的計算公式相互轉換。我們把這裡的垂直座標系稱為「邏輯座標系」，其座標值只是乙個數值，是沒有物理單位的，每乙個邏輯單位可以代表
1mm，也可以代表
1m，還可以代表
1個畫素或者
1/12
英吋。這個跟具體的物理裝置有關。
這裡我們再定義乙個新的座標系，其x
軸方向、
y軸方向、
x軸刻度和
y軸刻度都和邏輯座標系相同。我們把這個座標系稱為「裝置座標系」。如圖
1所示：
圖1 邏輯座標系與裝置座標系
這樣，同乙個座標值在不同的裝置座標系裡，可以對應不同的點，它們之間存在一種對映關係。比如邏輯座標系中的a
點(1,1)
，可以對映到裝置座標系的a』
(1,1)。
圖2 點對映
同理，邏輯座標系裡的乙個矩形abcd
也可以對映到裝置座標系裡的矩形a』
b』c』
d』。
圖3 矩形對映
這種對映都很簡單。現在，我想把邏輯座標系裡的矩形abcd
對映到裝置座標系裡的a」
b」c」
d」，如圖4
所示，可不可以呢？
圖4 矩形對映2
當然可以，也很簡單，只需要把裝置座標系裡的對映圖形平移一下就可以了。怎麼平移呢？只需要把裝置座標系裡的原點平移到現在的a
」位置。現在，我們以a
」為原點，再作乙個輔助座標系，如圖5
所示。這時，邏輯座標系裡的原點就對映到裝置座標系裡的輔助座標系的原點。
圖5 裝置座標系中的輔助座標系
同理，我們也可以平移邏輯座標系裡的原點，在邏輯座標系裡也作乙個輔助座標系。平移之後的對映效果如圖6
所示。可見，在平移之後，邏輯座標系新的座標原點對映到裝置座標系新的座標原點。
圖6 平移邏輯座標系的原點
現在，我們把邏輯座標系裡的輔助座標系稱為「視窗」，把裝置座標系裡的輔助座標系稱為「視口」。把平移邏輯座標系原點的操作稱為setwindoworg()
，把平移裝置座標系原點的操作稱為
setviewportorg()
。這兩個函式的引數都是以各自原來的座標係為基準的。比如，圖中平移視窗原點應該呼叫
setwindoworg (1.5
， - 1.8)
，而平移視口原點應該是
setviewportorg（1
，1）。平移之後，原座標系的零點並不變，改變的只是視窗或者視口的原點（相當於輔助座標系的零點）。
所有的對映都是從視窗對映到視口。上述的對映方式很簡單。下面介紹一種新的座標系，其x
軸方向依然向右，但
y軸方向卻是向下，每乙個邏輯單位代表乙個畫素。這就是「螢幕座標系」，我們把從邏輯座標系對映到螢幕座標系的對映方式稱為「
mm_text
」。圖7
螢幕座標系
我們知道，邏輯座標系是無窮大的，想在**繪圖就可以在**繪圖，但是顯示裝置（比如螢幕，在應用程式中是客戶區）大小卻是有限的。現在，我要在邏輯座標系裡畫乙個2000*2000
大小的矩形，對映到螢幕上就是乙個
2000
畫素*2000
畫素的乙個矩形。但是，應用程式的客戶區並沒有那麼大，只能顯示矩形的一部分。顯示哪一部分呢？在
windows
程式中，客戶區的左上角始終對應裝置座標系的零點，顯示區域是第一象限，這個是不能改變的。這時，客戶區只能顯示矩形的左上角部分。怎樣才能顯示矩形的其他部分呢？只需要把矩形移動一下。這就好比用放大鏡看報紙，放大鏡不動，只移動報紙就可以看到報紙上的所有內容了。
圖8 視口與客戶區的關係
（圖中的「螢幕」指的是客戶區）
那怎麼樣移動矩形呢？移動視口的原點就可以了。預設情況下，視口原點和裝置座標系的原點是重合的，把視口的原點移到(-1000, -1000)
的位置，就可以看到矩形的右下角部分了。
當然，移動視窗的原點也是可以的。因為在邏輯座標系裡作圖時，圖形的邏輯位置不變，當視窗的原點移動時，圖形與視窗原點的相對位置也就發生了改變，對映後視口中的圖形與視口原點的相對位置也會相應的發生改變。如圖10
，把視窗原點移動到
(1000,1000)
後，矩形的中心會對映到視口的零點，即客戶區的左上角。
邏輯座標系
裝置座標系（螢幕）
圖10
移動視窗原點
剛才我們在邏輯座標系裡畫了乙個2000*2000
大小的矩形，顯示在螢幕上的矩形長
2000
畫素，寬也是
2000
畫素。這樣，在不同大小的顯示器上，由於畫素間距不同，所以實際大小也不同。並且，有的顯示器畫素的水平間距和垂直間距也不同，這時畫的本來是個正方形，但顯示出來卻變成了長方形！這時，可以使用
mm_lometric
對映模式，保證所畫的每乙個邏輯單位長度對應
0.1mm
。在不同的顯示器上顯示時，它會根據自己的點距來調整。
視口和視窗
對映方式指定了邏輯座標系的邏輯單位和座標軸正方向,座標原點沒有涉及。而且,在 自作主張的 兩種對映方式下,邏輯單位 座標軸正方向和座標原點都有待確定。視口 是基於裝置座標的,通常,視口與客戶區相同。點 0,0 是客戶區域的左上角。x 的值向右增加,y 的值向下增加。視窗 是基於邏輯座標的,邏輯座標可...
視窗與視口
幾個概念容易亂,先寫下來 一般來說,客戶區左上角的點對應視口原點 0,0 我理解他們為等同關係.裝置區 0,0 點就是視口原點 0,0 點,且不可改變.視窗座標應用中使用邏輯座標,偶理解為視窗原點就是邏輯原點.等同關係.且可以改變.下面可能用上.不要理解為整個視窗的左上角那個點 從理解應用來說,無論...
html響應式設計視口 視窗視口
關於視口 視口在響應式設計中是乙個非常重要的概念，在移動端瀏覽器中存在兩種視口 一是可見視口，即裝置大小 另外一種是視窗視口，即網頁寬度。裝置螢幕是414pxd 寬度，在瀏覽器中，414px的螢幕能夠顯示1200px 的內容。那麼，414px 就是可見視口的寬度，而1200px 就是視窗視口的寬度。...