打開程序，屏幕上顯示如圖4-1所示的程序流程圖和如圖4-2所示的程序運行主畫面。
圖4-1 程序流程圖 圖4-2 程序運行主畫面
在圖4-1中，【run to view documentation】設計圖標完成發布一個聲明并運行程序到主畫面的功能，其余設計圖標則完成運行程序實例的功能。
在如圖4-2所示的程序運行主畫面中有如下3個按鈕：
l 【introduction】——程序簡介
l 【drawing functions】——程序流程圖標設計說明
l 【run the example】——運行實例
單擊【run the example】按鈕，程序進入實例演示分支，其運行畫面如圖4-3所示。
圖4-3 實例運行畫面
畫面左側顯示出一個網格背景的區域，區域中畫有一條紅色直線，右側有兩個按鈕，一個是【enter x value】，一個是【enter y value】。用戶可單擊任意一個按鈕后并在坐標閃爍處輸入一個數值，從而得到折點的坐標值，程序將擦除原有直線并以此為折點在網格區域中畫出一條折線。
用戶也可用鼠標在網格區域內單擊任意位置并以此單擊點為折點畫折線，此時折點的坐標值將被實時顯示出來。
程序啟動畫面如圖4-3所示。
一條直線從網格區域左下角畫到右上角，折點坐標顯示為（0,0）。
這是因為程序首先進入了【graphing function】交互圖標下的【true--graph data】條件響應分支。該條件交互響應分支設置一直都有效，所以隨時可進入。
雙擊【true--graph data】群組圖標，其下級流程如圖4-4所示。
圖4-4 true--graph data下級流程
該流程中首先擦除已經畫出的線條，然后執行【draw new lines】運算圖標。運算圖標中的代碼如圖4-5所示。
圖4-5 【draw new lines】運算圖標中的代碼
該代碼首先對折點坐標變量的值做了如下的限制：
10≤datapointx≤183
53≤datapointy≤218
這是因為畫面上網格背景區域在上面的范圍之內，如圖4-6所示。
圖4-6 坐標系統說明圖
然后用line函數畫線。
由于datapointx和datapointy的初始值設為10和218，因此line函數畫出一條從（10,218）到（183,53）的紅色直線。
同時，由于在交互圖標中嵌入了{datapointx-10}和{218-datapointy}，因此折點坐標值顯示為（0,0）。
及時點評 按照屏幕坐標系統的定義，坐標原點在屏幕左上角，x軸愈往右愈大，y軸則愈往下愈大，這一點與平面坐標系是不同相同的，按照這個定義，o′點的屏幕坐標值為（10,218），網格區域坐標范圍則為（10,53）～（183,218）。
程序流程中設計了【enter x value】和【enter y value】兩個按鈕交互響應分支，這就是圖4-3中畫面右側出現的兩個按鈕。單擊其中一個按鈕，程序進入其中一個分支群組圖標，其下級流程如圖4-7所示。
文本輸入交互響應在畫面上形成一個坐標閃爍處，等待用戶輸入一個數值。用戶輸入一個數值（例如20）并按回車鍵確認后，該數值將被增加10而存入datapointx變量，即此時datapointx的值為30。
如果鍵入一個y坐標數值（比如135），則該值與218之差值存入datapointy變量，即此時datapointy的值為83。
x,y值的這種變換原因將在后面作詳細解釋。
圖4-7 enter x value下級流程
程序設計了一個【click on grid】的熱區交互響應分支，熱區區域就是網格背景區域。當用戶用鼠標在網格區域內單擊時，其下的運算圖標執行datapointx:=clickx，datapointy:=clicky從而將鼠標單擊處的坐標值存入折點變量datapointx和datapointy。
及時點評 無論是鍵盤輸入還是鼠標單擊，其目的都是為了取得x、y的坐標值并將該值存入折點坐標變量datapointx和datapointy，從而為畫折線做好了數據準備。
由于文本輸入時用代碼限定了輸入數值的范圍，而鼠標單擊熱區褪峭袂潁虼耍ｖち肆街址椒ㄋ〉玫惱鄣闋暌歡ㄔ諭袂蛑凇?/font>
由于文本輸入交互響應分支和鼠標單擊熱區交互響應分支的分支跳轉均設為“continue”，故程序在執行這幾個分支后均往右繼續而進入【true】條件交互響應分支。
該分支功能在前面已作了分析，只是此時datapointx和datapointy的值已不是初始值，因此兩句line函數畫出的兩條直線在datapointx、datapointy坐標點處形成折點，從而畫出一條折線。
注意，折線的起始點坐標仍為（10,218），終點坐標仍為（183,53）。
及時點評 當一個條件交互響應分支放在其他分支右側時，前面分支的跳轉均應設為“continue”，這樣才能保證最右側的條件交互響應分支得以執行。
由于屏幕坐標系統與平面坐標系定義不同，要保證按屏幕坐標系統正確畫線，又要適合用戶習慣的直觀感覺，因此在坐標之間要進行換算。
從如圖4-6所示的坐標系統說明圖中可以看出，畫線是以o點為坐標原點，而用戶輸入并顯示又是以o′點為坐標原點。
例如，當用戶用鍵盤輸入折點坐標（20,135）時，折點a在網格區域中的位置及其與o和o′點的相對坐標關系如圖4-6所示。
a點坐標相對于o′點為（20,135），這是用戶習慣坐標系統數值。
a點坐標相對于o點則為（30,83），這是屏幕坐標系統數值。
也就是說，用戶輸入的x坐標數值必須加上10才形成畫線時的折點x坐標，而用戶輸入的y坐標數值與218的差值才形成畫線時的折點y坐標。因此：
x=datapointx:=10+numentry=10+20=30
y=datapointy:=218-numentry=218-135=83
但實時顯示的坐標值仍還原為：
x={datapointx-10}={30-10}=20
y={218-datapointy}={218-83}=135
這樣便實現了既保證按屏幕坐標系統正確畫線又滿足了用戶可按照習慣的平面坐標系進行輸入和觀看。
及時點評 在繪圖和獲取坐標值時，屏幕坐標系統的定義是十分重要的，正確理解屏幕坐標系統概念，才能保證程序設計的正確。屏幕坐標與直觀坐標之間的換算是一個設計技巧，靈活運用該技巧可使程序運行更適應用戶要求，從而達到令人滿意的效果。
該例應用line函數，根據用戶輸入的坐標值或鼠標單擊點的坐標值為折點，畫一條折線。其中主要應用了如下的一些概念、原理和技術：
l 系統坐標概念
l 鍵盤輸入與鼠標單擊取得折點坐標值的設計
l 用line函數畫折線
l 屏幕坐標與直觀坐標之間的換算技巧
l 實時顯示設計
l 條件交互響應的應用
新聞熱點
疑難解答
