MS Small Basic第十一章: 事件(Events)與互動(Interactivity)

前面十個章節主要都在學習具有 Properties(屬性)Operations(操作) 的物件(objects), 例如 GraphicsWindow, 它下面還有很多現成的可供程式設計人員調用的功能, 像是 MouseX, PenColor, DrawRectangle 等等. 以下是 GraphicsWindow 可以做的所有事情截圖.

除了屬性和操作, 有些物件還帶有事件(events). 事件和互動(interactivity)要一起學習, 因為要開始學習如何讓程式能和使用者互動, 像是常見的訊息框框或是一些根據使用者的輸入而應變的遊戲. This lesson introduces you to events with which you can add interactivity to your Small Basic programs. In other words, you can create an interactive program in Small Basic by defining events that trigger an action in response to user inputsInteractivity here includes events that trigger an action; for instance, when the user clicks a button on the mouse or presses a key on the keyboard.

下面是一個非常簡單的程式, 只有一個語句(statement)和一個副程式(或稱子程式). 副程式使用 GraphicsWindow (圖形視窗)物件的 ShowMessage (顯示訊息)操作顯示一個對話方塊給使用者. (ShowMessage要包含(“訊息文字", “視窗標題"), 這邊我用的分別是(“恭喜中獎", “電腦病毒"))

執行時會先出現空白視窗, 要在空白視窗上面點一下滑鼠左鍵才會出現訊息視窗. (很重要, 不要傻傻的以為自己程式寫錯)

恭喜你電腦中毒了~ㄎ ㄎ~ 在這個程式裡我們將一個副程式 OnMouseDown 指派到 GraphicsWindow 物件的 MouseDown (按下滑鼠)事件. 你可能有注意到, MouseDown看起來非常像一個屬姓(Property), 除了一些指定值–副程式 OnMouseDown. 這就是事件的特殊性, 當事件發生時, 副程式會自動被調用. 在這個例子中, 每次使用者只要在 GraphicsWindow 上點擊一次滑鼠, 副程式 OnMouseDown 就會被調用.

這種事件處理是非常強大的, 它支援非常有創造性和有意思的程式. 使用這種方式編寫的程式通常被稱為事件驅動(event-driven)的程式.

你可以修改副程式 OnMouseDown, 使它做更多事情. 例如下面的例子中, 你可以在使用者點擊滑鼠的地方繪製大藍點.

滑鼠隨你點, 一點就是一個藍色的大點點. 請注意在上面程式中, 我們使用 MouseX 和 MouseY 來取得滑鼠的座標位置. 然後我們用滑鼠座標點做為圓心繪製一個圓.

處理多個事件

你想處理多少事件是沒有限制的. 你甚至可以使用一個副程式(子程式)來處理多個事件. 但是每一次只能處理一個事件, 如果你試圖同時指派兩個副程式給同一個事件, 只有後面那一個副程式會起作用. 為了說明這一點, 讓我們使用前面的範例並添加一個處理鍵盤按鍵的副程式. 同時我們讓新的副程式改變筆刷的顏色, 這樣當你點擊滑鼠時你將看到不同顏色的點.

原來當你運行程式並在視窗中點擊時, 你將看到藍色的點.

 

現在, 如果你在鍵盤上按任意鍵, 然後再點擊滑鼠, 你將看到不同顏色的點. 當你按下鍵盤上的鍵時, 副程式 OnKeyDown (按下鍵盤按鍵)就會被執行, 它將比刷的顏色改為隨機顏色. 然後你再點滑鼠時, 你就會看到一個使用新設置的顏色(隨機產生的顏色)的圓點.

一個繪圖程式 A Paint Program

由事件和副程式的說明, 我們現在可以編寫讓使用者在視窗中繪圖的程式了. 只要我們把問題分解為較小的模組, 編寫這樣的程式就簡單得令人吃驚了. 第一步, 我們寫一個允許使用者在圖形視窗任意移動滑鼠的程式, 滑鼠走過的地方會留下一道軌跡.

真的是凡走過必留下痕跡, 亂畫一通…………………………….

當你運行這個程式時, 第一道軌跡總是從視窗左上角即(0, 0)的位置開始. 我們可以透過處理 MouseDown 事件並捕捉當事件發生時的 prevX 和 prevY 值來修復這個問題. 同時, 我們只需要把使用者按下滑鼠時的軌跡記錄下來. 在其他時間我們不必繪製軌跡線. 為了實現這樣的行為, 我們將使用 Mouse (滑鼠)物件的 IsLeftButtonDown (滑鼠左鍵按下)屬性. 該屬性告訴我們滑鼠左鍵是否被按下. 如果這個值為 true (真), 我們就畫軌跡, 否則就不畫.

接下來的操作行為就跟小畫家一樣了, 滑鼠左鍵按著才能畫線

Lesson 3.4: Events and Interactivity

Keyboard Events

  • KeyDown: 當鍵盤上的按鍵被按下時引發事件
  • KeyUp: 當鍵盤上的按鍵被釋放時引發一個事件

When you click Run on the toolbar, your program runs. A graphics window appears with a rectangle in the center. When you press RETURN, the rectangle rotates. When you release the Return key, the rectangle rotates back to its original position.

Move Events

  • MouseDown: 當滑鼠鍵被按下時引發一個事件
  • MouseUp: 當滑鼠鍵被釋放時引發一個事件
  • MouseMove: 當滑鼠被移動時引發一個事件

You must declare the mouse events in your code. Small Basic has three types of mouse events: MouseDownMouseUp, and MouseMove. You must also assign an accompanying subroutine for your event. When the mouse is clicked, released, or moved, the subroutine will perform the action that is defined within it. You can use mouse events on controls and shapes.

廣告

About leeoxygen

吱吱喳喳,嚕嚕啦啦,嗯嗯啊啊.
本篇發表於 我的Small Basic學習記錄 並標籤為 , 。將永久鏈結加入書籤。

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

您的留言將使用 WordPress.com 帳號。 登出 / 變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 / 變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 / 變更 )

Google+ photo

您的留言將使用 Google+ 帳號。 登出 / 變更 )

連結到 %s