appinventor零基礎(chǔ)android移動(dòng)應(yīng)用開發(fā)-谷歌精品課程城市學(xué)院第4講安安愛(ài)畫畫

1、第4講 安安愛(ài)畫畫2014年12月谷歌精品課程App Inventor 零基礎(chǔ)Android移動(dòng)應(yīng)用開發(fā)浙江大學(xué)城市學(xué)院吳明暉 教授 本章目標(biāo)深入理解block可視化編程掌握利用Canvas組件實(shí)現(xiàn)繪圖功能了解事件與行為，掌握事件驅(qū)動(dòng)的編程，學(xué)會(huì)處理手機(jī)觸屏、劃屏等基本事件了解數(shù)據(jù)類型、參數(shù)與變量、命名規(guī)則等，掌握變量的定義和使用本章概要涂鴉畫板展示與分析涂鴉畫板開發(fā)過(guò)程界面設(shè)計(jì)畫圓、線、文本通過(guò)觸摸事件來(lái)劃線存盤數(shù)據(jù)類型與變量涂鴉畫板展示與分析(a)開始界面(b)點(diǎn)擊畫圓(c)點(diǎn)擊畫線涂鴉畫板展示與分析(e)直接畫(d)點(diǎn)擊文字(f)保存后的文件界面設(shè)計(jì)控件用途及命名控件用途命名Screen

2、用于做應(yīng)用背景，和放置所需控件。Screen1Canvas用于繪圖和放置動(dòng)畫控件。CanvasDrawBall用于顯示運(yùn)動(dòng)天體，點(diǎn)畫圈按鈕，在對(duì)應(yīng)瞬時(shí)位置畫圈。BallPink用于顯示運(yùn)動(dòng)天體，點(diǎn)劃線按鈕，以兩球?yàn)槎它c(diǎn)劃線。BallYellowBallYellow2用于顯示運(yùn)動(dòng)天體，點(diǎn)劃線按鈕，以兩球?yàn)槎它c(diǎn)劃線。BallRedTableArrangement用于將控件按行列形式排列。TableArrangement1Button用于響應(yīng)點(diǎn)擊保存行為。ButtonSave用于響應(yīng)點(diǎn)擊清空畫布行為。ButtonClear用于響應(yīng)點(diǎn)擊退出應(yīng)用行為。ButtonQuit用于響應(yīng)點(diǎn)擊，在BallYell

3、ow和BallYellow2間劃線。ButtonYellow用于響應(yīng)點(diǎn)擊，使得BallPink畫圈行為。ButtonPink用于響應(yīng)點(diǎn)擊，使得RedBall簽名AnAn的行為。ButtonRedLable用于提示可以直接在畫布上畫軌跡。LablePromptSound用于觸屏?xí)rAnAn告訴大家我在這里。SoundAnAnClock用于產(chǎn)生等間隔的觸發(fā)行為，使四個(gè)天體運(yùn)動(dòng)。Clock1Notifier用于彈出提醒框。Notifier1Drawing and Animation控件組Canvas控件是用于畫布，Ball和ImagaSprite這兩個(gè)動(dòng)畫控件只能在畫布上使用Ball和ImageSpr

4、ite這兩個(gè)控件最大的不同是，后者可以顯示圖片動(dòng)畫控件可以響應(yīng)用戶的滑動(dòng)、觸摸 以及拖拽。同時(shí)還可以自定義反彈、跳躍、沖突處理和越界處理功能Canvas控件介紹Canvas控件是用于畫布，Ball和ImagaSprite這兩個(gè)動(dòng)畫控件只能在畫布上使用常見功用響應(yīng)觸摸、劃屏等事件提供寫文本、畫圓、畫線等方法提供畫布中圖像存盤和清屏等方法畫布控件屬性屬性講解屬性值BackgroundColor畫布的背景顏色。GrayBackgroundImage畫布的背景圖片。Backgroundimage.jpgFrontSize畫布上寫文本時(shí)，文字大小。14.0LineWidth畫布的行寬。2.0PaintC

5、olor畫布繪制圖形的顏色。默認(rèn)TextAlignment畫布上文本對(duì)齊方式。centerVisible畫布控件是否可見。默認(rèn)Width畫布的寬度。Fill parentHeight畫布的高度。280 pixels球控件屬性屬性講解BallPink屬性值Enable勾選這個(gè)屬性，才響應(yīng)碰撞、移位等行為。默認(rèn)Heading指的是從x軸開始，逆時(shí)針轉(zhuǎn)動(dòng)所得方向。默認(rèn)Interval時(shí)間間隔。默認(rèn)PaintColor控件本身的顏色。PinkRadius控件的半徑。12Speed控件運(yùn)動(dòng)的速度。默認(rèn)Visible控件是否可見。默認(rèn)X控件離畫布左邊距的距離。默認(rèn)Y控件離畫布上邊距的距離。默認(rèn)Z控件層級(jí)，

6、重疊時(shí)層級(jí)高的擋住層級(jí)低的。默認(rèn)HorizontalArrangement是將控件水平排列VerticalArrangement是將控件垂直排列TableArrangement是將控件按照設(shè)定的幾行幾列來(lái)排列，類似表格形式在同一個(gè)格子里面放置多個(gè)控件的話，只會(huì)顯示最后一個(gè)控件。如果沒(méi)有控件，默認(rèn)行高為100像素，如果有，行高和列寬的值都是其行列控件的最大值Layout布局控件組表格布局控件屬性屬性講解修改值Columns表格布局的列數(shù)3Rows表格布局的行數(shù)2Visble控件是否可見默認(rèn)Width控件的寬度228Height控件的高度默認(rèn)標(biāo)簽控件屬性屬性講解修改值BackgroundColor

7、標(biāo)簽的背景顏色。默認(rèn)FontBold標(biāo)簽中文字是否加粗。勾選FontItalic標(biāo)簽中文字是否傾斜。默認(rèn)FontSize標(biāo)簽中文字的大小。20.0FontTypeface標(biāo)簽中文字的字體。默認(rèn)Text標(biāo)簽中的文字內(nèi)容?？梢灾苯釉诋嫴忌袭嬡壽ETextAlignment標(biāo)簽中文字的對(duì)齊方式。默認(rèn)TextColor標(biāo)簽中文字的顏色。OrangeVisible標(biāo)簽是否可見。默認(rèn)Width標(biāo)簽的寬度。216 pixelsHeight標(biāo)簽的高度。默認(rèn)增加行為實(shí)現(xiàn)4個(gè)小球的定時(shí)隨機(jī)移動(dòng)使用Clock控件創(chuàng)建一個(gè)在規(guī)定間隔內(nèi)定時(shí)觸發(fā)的行為控件行為講解Clock1Clock1.Timer等間隔時(shí)刻觸發(fā)這個(gè)函數(shù)B

8、allWhiteBallWhite.MoveTo移動(dòng)到指定坐標(biāo)(x,y)BallRedBallRed.MoveToBallYellowBallYellow.MoveToBallYellow2BallYellow2.MoveToClock控件簡(jiǎn)介Clock控件作用包括計(jì)算時(shí)間、定時(shí)觸發(fā)事件等Timer每個(gè)時(shí)間間隔開始和結(jié)束的臨界點(diǎn)觸發(fā)這個(gè)函數(shù)內(nèi)的行為Duration(start, end)：start和end都是瞬時(shí)時(shí)間，函數(shù)返回的是開始和結(jié)束時(shí)間間隔，單位為毫秒繪畫畫布與像素像素是圖像顯示的基本單位，屏幕分辨率越高，像素值越高直角坐標(biāo)與計(jì)算機(jī)屏幕坐標(biāo)：X軸Y軸+-(0, 0)直角坐標(biāo)系X軸Y軸

9、+(0, 0)計(jì)算機(jī)屏幕坐標(biāo)畫布的坐標(biāo)系原點(diǎn)在畫布左上角X向右增加Y向下增加單位為像素點(diǎn)繪畫圖形點(diǎn)：在計(jì)算機(jī)屏幕上，由x和y兩個(gè)參數(shù)指定一個(gè)點(diǎn)的位置。如在300*300的像素畫布中心繪制一個(gè)點(diǎn)，即X軸150、Y軸150直線：“兩點(diǎn)確定一條直線”。則一條直線應(yīng)由四個(gè)參數(shù)x1, y1, x2和y2確定，它們分別代表直線兩個(gè)端點(diǎn)的坐標(biāo)圓：繪制圓時(shí)，由三個(gè)參數(shù)(x, y, r)確定，x和y確定圓心，r確定圓的半徑小球運(yùn)動(dòng)行為每間隔500毫秒觸發(fā)一次Timer事件坐標(biāo)位置在一定范圍內(nèi)產(chǎn)生的隨機(jī)數(shù)決定作圖按鈕行為行為講解ButtonYellow.Click點(diǎn)擊按鈕時(shí)觸發(fā)這個(gè)函數(shù)ButtonRed.Clic

10、kButtonPink.ClickCanvasDraw.PaintColor設(shè)置畫布繪制時(shí)用的顏色CanvasDraw.DrawLine在畫布上兩點(diǎn)之間畫直線CanvasDraw.DrawCircle在畫布上以(x,y)為圓心，r為半徑畫圓CanvasDraw.TextAnAngle在畫布上以angle傾斜角在(x,y)點(diǎn)出寫文本text信息寫文本、畫圓、畫線畫線寫文本畫圓通過(guò)觸摸事件來(lái)劃圖Dragged事件會(huì)不斷觸發(fā)，每次畫一小段直線復(fù)雜的圖形可由多段小直線組成存盤和清屏關(guān)閉應(yīng)用變量與數(shù)據(jù)類型變量可以想象為具有標(biāo)簽的存放數(shù)據(jù)的內(nèi)存塊，這個(gè)標(biāo)簽就是變量名，以后可以通過(guò)變量名來(lái)使用和修改這些數(shù)據(jù)

11、AI中的數(shù)據(jù)類型數(shù)字類型：值如 等；布爾類型：值為 （真/假）；文本類型：值如 等；顏色類型：值如 等；列表類型：值如 等；控件類型：值如 等；變量的定義和使用變量的定義 需要指明 變量的數(shù)據(jù)類型 變量名 初始值（可選）在AI的Block中定義變量在C語(yǔ)言中定義變量 int angle=12; char name20=“AnAn”;在AI中使用變量參數(shù)參數(shù)，也叫參變量，是一種變量參數(shù)是隨過(guò)程（函數(shù)）定義而存在的在AI的Block中DrawLine方法有4個(gè)參數(shù)(x1, y1, x2, y2) C語(yǔ)言代碼void DrawLine(int x1, int y1, int x2, int y2)作業(yè)和思考題29動(dòng)手實(shí)踐“安安愛(ài)畫畫”App的開發(fā)和調(diào)試運(yùn)行過(guò)程增