guidimension.htm
来自「电脑图学（Computer Graphics）是资料结构、演算法与数学的应用」· HTM 代码 · 共 154 行
HTM
154 行
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<link rel="stylesheet" href="css/stdlayout.css" type="text/css">
<link rel="stylesheet" href="css/print.css" type="text/css">
<meta content="text/html; charset=gb2312" http-equiv="content-type">
<title>绘图座标系</title>
</head>
<body>
<h3><a href="http://caterpillar.onlyfun.net/GossipCN/index.html">From
Gossip@caterpillar</a></h3>
<h1><a href="ComputerGraphics.htm">Computer Graphics: 绘图座标系</a></h1>
二维的直角座标系统是您所习惯使用的，它使用向右为正的X轴与向上为正的Y轴来规范出平面上的每一个点。<br>
<br>
然而在电脑荧幕绘图上，则是使用向右为正的X轴、向下为正的Y轴来定出绘图时的位置，而绘图目的地的左上角为座标原点，如下所示：<br>
<img style="width: 320px; height: 278px;" alt="绘图座标" title="绘图座标" src="images/guiDimension-1.jpg"><br>
<br>
所以在二维直角座标系统中，上图中的Y1会是个负值，但在绘图座标系统中的Y1要是正值，所以在绘图时自然必须将Y轴方向改过来，不过这会造成一些困扰，最好是写成函式，在绘图时呼叫函式自动帮我们转换，例如：<br>
<div style="margin-left: 40px;"><span style="font-weight: bold; font-family: Courier New,Courier,monospace;">public void setLocation(int x, int y) {</span><br style="font-weight: bold; font-family: Courier New,Courier,monospace;">
<span style="font-weight: bold; font-family: Courier New,Courier,monospace;"> this.x = x;</span><br style="font-weight: bold; font-family: Courier New,Courier,monospace;">
<span style="font-weight: bold; font-family: Courier New,Courier,monospace;"> this.y = -y;</span><br style="font-weight: bold; font-family: Courier New,Courier,monospace;">
<span style="font-weight: bold; font-family: Courier New,Courier,monospace;">}</span><br>
</div>
<br>
在绘图时，我参考座标有时并不希望一定是在左上角，所以可设定一个参考原点，以该点作为参考定出绘图座标，例如： <br>
<span class="postbody"></span><img style="width: 312px; height: 272px;" alt="绘图座标" title="绘图座标" src="images/guiDimension-2.jpg"><br>
<br>
此时可以使用下面这个公式，其中x与y是相对于Org的座标：<br>
<div style="margin-left: 40px;"><span style="font-weight: bold; font-family: Courier New,Courier,monospace;">public void setLocation(Orgin org, int x, int y) {</span><br style="font-weight: bold; font-family: Courier New,Courier,monospace;">
<span style="font-weight: bold; font-family: Courier New,Courier,monospace;"> this.x = org.getX() + x;</span><br style="font-weight: bold; font-family: Courier New,Courier,monospace;">
<span style="font-weight: bold; font-family: Courier New,Courier,monospace;"> this.y = org.getY() -y ;</span><br style="font-weight: bold; font-family: Courier New,Courier,monospace;">
<span style="font-weight: bold; font-family: Courier New,Courier,monospace;">}</span><br>
</div>
<br>
可以让这个公式更有弹性，如果有时想直接使用原来的绘图座标，也就是Y轴向下的座标，可以使用下面这个公式，当yA为1时，表示使用Y轴向上的座标（直角座标），当yA为0时，表示使用Y轴向上的座标（绘图座标）：<br>
<div style="margin-left: 40px;"><span style="font-weight: bold; font-family: Courier New,Courier,monospace;">public void setLocation(Orgin org, int x, int y, int yA) {</span><br style="font-weight: bold; font-family: Courier New,Courier,monospace;">
<span style="font-weight: bold; font-family: Courier New,Courier,monospace;"> this.x = org.getX() + x;</span><br style="font-weight: bold; font-family: Courier New,Courier,monospace;">
<span style="font-weight: bold; font-family: Courier New,Courier,monospace;"> this.y = org.getY() + y * (1 - 2 * yA) ;</span><br style="font-weight: bold; font-family: Courier New,Courier,monospace;">
<span style="font-weight: bold; font-family: Courier New,Courier,monospace;">}</span><br>
</div>
<br>
不管是文字或图形，当显示在荧幕上时都是以一个点为单位，每一个点称之为一个像素（pixel，picture element的合并）。<br>
<br>
水平解析度是指在荧幕范围内的一条水平线中，使用多少像素，而垂直解析度则是在荧幕范围中的一条垂直使用多少像素。<br>
<br>
多数的绘图座标系统都是使用像素作为座标单位，例如在荧幕解析度为800X600的情况下，荧幕绘图的座标是以荧幕的左上角为(0,
0)，右上角为(800, 0)，左下角为(0, 600)，右下角为(800,
600)，若为1024X768或其它解析度则依此类推，荧幕解析度越高，则绘制出来的图形越细致。<br>
<br>
如果绘制的目的地并不是以荧幕为范围，而是以自行定义的画布为范围，例如一个视窗的大小为(X, Y)，则绘图的座标是以视窗的左上角（不含标题列）为(0, 0)，右上角为(X, 0)，左下角为(0, Y)，右下角为(X, Y)。<br>
<br>
<br>
</body>
</html>
⌨️ 快捷键说明
复制代码Ctrl + C
搜索代码Ctrl + F
全屏模式F11
增大字号Ctrl + =
减小字号Ctrl + -
显示快捷键?