2014年12月25日 星期四

PaintPot(2)

PaintPot (2)是 App Inventor 中基礎的繪圖程式範例,我們將延續PaintPot(1)來練習設計在APP中使用三種顏色和自己控制點出大小點的繪圖的程式。

原始範例:PaintPot from MIT




本範例假設你已完成PaintPot的範例。

在這裏我們使用之前已經做好的PaintPot(1)程式,將在裡面增加大小點的功能。

步驟一:首先開啟PaintPot(1),請在視窗左側的元件面板(Palette)中,點選頁面布局(Layout)中的水平排列(HorizontalArrangement)元件,按住滑鼠不放將其拖曳至貓咪圖片的下面,接著按重新命名(Rename)將其名字改為BottomButons。



步驟二:請先將"擦除"按鈕拖曳至BottomButons中,接著請在視窗左側的元件面板(Palette)中,點選使用者介面(User Interface)中的按鈕(Button)元件,按住滑鼠不放將其拖曳至"擦除"按鈕的右邊,接著請到右邊的屬性(Properties)面板上,找到 Text 屬性,將方框中預設的文字改為大點。



步驟三:請在視窗左側的元件面板(Palette)中,點選使用者介面(User Interface)中的按鈕(Button)元件,按住滑鼠不放將其拖曳至"大點"按鈕的右邊,接著請到右邊的屬性(Properties)面板上,找到 Text 屬性,將方框中預設的文字改為小點。



步驟四:請先點一下"大點",再按重新命名(Rename),將其名字改為 ButtomBig,接著按"小點",再按重新命名(Rename),將其名字改為 ButtomSmall。接著我們就可以開始編寫程式囉!



步驟五:
請在左側Blocks選單中點選Built-in下的變數(Variables),在彈出的拼圖式程式區塊中選取 initialize global name to,置於預覽視窗中。



步驟六:請將 initialize global name to 中的 name 空格,將其名字改為 small,接著請到左側點選數學(Math),在彈出的拼圖式程式區塊中選取 0,並將0改為2,拖曳至to的後面。

步驟七:請在左側Blocks選單中點選Built-in下的變數(Variables),在彈出的拼圖式程式區塊中選取 initialize global name to,置於預覽視窗中。
請將 initialize global name to 中的 name 空格,將其名字改為big,接著請到左側點選數學(Math),在彈出的拼圖式程式區塊中選取 0,並將0改為8,拖曳至to的後面。



步驟八:請在左側Blocks選單中點選Built-in下的變數(Variables),在彈出的拼圖式程式區塊中選取 initialize global name to,置於預覽視窗中。
請將 initialize global name to 中的 name 空格,將其名字改為dotsize,接著請到左側點選數學(Math),在彈出的拼圖式程式區塊中選取 0,並將0改為2,拖曳至to的後面。



解釋:
步驟六的用意是定義一個叫做"小"的半徑為2,步驟七的用意是定義"大"的半徑為8,而步驟八的用意是用來定義斑點大小的半徑為2。

步驟九:請在左側Blocks選單中點選 ButtonBig,在彈出的拼圖式程式區塊中選取 when ButtonBig Click,置於預覽視窗中。
請到左側點選變數(Variables),在彈出的拼圖式程式區塊中選取 set...to,將 set...to卡入 when ButtonBig Click 的 to 中,並將 set...to 的空格點一下,選取至 global dotsize。
請到左側點選變數(Variables),在彈出的拼圖式程式區塊中選取get並將get後面的空格點一下,選取至 global big,將 get global big 卡至 set global dotsize to 的後面。 



步驟十:請在左側Blocks選單中點選 ButtonSmall,在彈出的拼圖式程式區塊中選取 when ButtonSmall Click,置於預覽視窗中。
請到左側點選變數(Variables),在彈出的拼圖式程式區塊中選取 set...to,將 set...to卡入 when ButtonSmall Click 的 to 中,並將 set...to 的空格點一下,選取至 global dotsize。
請到左側點選變數(Variables),在彈出的拼圖式程式區塊中選取get並將get後面的空格點一下,選取至 global small,將 get global small 卡至 set global dotsize to 的後面。 



解釋:步驟九和步驟十做的是,當按下"大點"時,大點會跑出半徑為8的大點,而按下"小點"時就會跑出半徑為2的小點。

步驟十一:請到左側點選變數(Variables),在彈出的拼圖式程式區塊中選取get並將get後面的空格點一下,選取至 global dotsize,將 get global dotsize 卡至上一次PaintPot(1)中所做的  when DrawingCanvas.Touched 裡的 r 後面。



完整程式如下:





恭喜完成此次範例!

1 則留言:

  1. 剛跟著上述程序做的時候發現最後執行畫線的時候,線粗並不會跟著改變,反而用點一下的方式會跟著變

    回覆刪除