App Inventor 2 指令中文化 Canvas 畫布

Canvas 畫布

畫布為一矩形區域,可在其中執行繪畫等觸碰動作或設定動畫。

在 Designer 或 Blocks Editor 中皆可設定畫布背景顏色、塗料顏色、背景圖片圖片、寬和高等屬性,注意寬和高的單位為像素必須為正值。

畫布上的任何位置皆有一特定座標(X,Y)值,其中:

    • X 為座標點距離畫布左緣之距離,單位為像素。
    • Y 為座標點距離畫布上緣之距離,單位為像素。

您可用畫布提供的事件來判斷畫布是否被觸摸或是動畫物件是否正在被拖動。

另外也提供了畫點、線和圓的方法。


屬性

BackgroundColor
設定畫布背景顏色。

Canvas.BackgroundColor : 取得 Canvas 背景顏色
Set Canvas.BackgroundColor 設定 Canvas 背景顏色


BackgroundImage
設定背景圖片。

Canvas.BackgroundImage : 取得 Canvas 背景圖片
Set Canvas.BackgroundImage 設定 Canvas 背景圖片


Height
畫布高度。

Canvas.Height 取得 Canvas 現在高度(integer)
Set Canvas.Height : 設定 Canvas 高度


LineWidth
畫線時的寬度。

Canvas.LineWidth 取得 Canvas 現在畫線的寬度(integer)
Set Canvas.LineWidth : 設定 Canvas 畫線的寬度


PaintColor
畫線時的顏色。

Canvas.PaintColor 取得 Canvas 現在畫線的顏色
Set Canvas.PaintColor : 設定 Canvas 畫線的顏色


Visible
本項需設為真,才能在螢幕上看到本元件。

Canvas.Visible 取得 Canvas 現在是否可被看見(boolean)
Set Canvas.Visible設定 Canvas 為可/不可被看見


Width
畫布寬度。

Canvas.Width 取得 Canvas 現在寬度(integer)
Set Canvas.Width : 設定 Canvas 寬度


FontSize 
文字字體大小。

Canvas.FontSize  : 取得 Canvas 文字字體大小
Set Canvas.FontSize設定 Canvas 文字字體大小



方法

Clear
Canvas.Clear : 清除畫布上的各種塗鴉。

如果畫布有背景圖片的話,本方法不會清除背景圖片。


DrawCircle(number x, number y, number r)
Canvas.DrawCircle : 在畫布上指定座標處(x, y)繪製一實心圓形,需指定其半徑 r。


DrawLine(number x1, number y1, number x2, number y2)
Canvas.DrawLine : 在畫布上畫出一條直線,起始點(x1, y1),終點(x2, y2)。


DrawPoint(number x, number y)
Canvas.DrawPoint : 在畫布上指定座標處(x, y)畫出一個點。


Save
Canvas.Save : 將畫布當下狀態存成一張圖檔,並儲存於 Android 裝置的外部儲存空間(SD 記憶卡),接著回傳該檔案的完整路徑。

 如果發生錯誤時, 會由 Screen 元件的 ErrorOccurred 事件來處理。


SaveAs
Canvas.SaveAs : 將畫布當下狀態存成一張圖檔,並儲存於 Android 裝置的外部儲存空間。

本方法需指定存檔檔名,並必須加上副檔名為 .JPEG、.JPG 或 .PNG 其中之一。

本方法一樣會回傳儲存檔案的完整路徑。


DrawText
Canvas.DrawText : 在指定座標處 (x, y) 顯示文字 text 內容


DrawTextAtAngle
Canvas.DrawTextAtAngle : 在指定座標處 (x, y) 顯示文字 text 內容,並指定旋轉角度 angle。

angle 為數字型態,代表逆時針旋轉的角度,從 0 開始為水平。


GetPixelColor
Canvas.GetPixelColor : 擷取指定座標處 (x, y) 的顏色,回傳值為數字,代表該處顏色的色碼。


GetBackGroundPixelColor
Canvas.GetBackGroundPixelColor : 擷取指定座標處 (x, y) 的顏色,回傳值為數字,代表該處顏色的色碼。

本指令可擷取包含了 Canvas 畫布上大部份元件的顏色,包含點、線與圓圈,但不包含動畫元件。


SetBackGroundPixelColor
Canvas.SetBackGroundPixelColor : 設定指定座標處 (x, y) 的顏色,本指令與 DrawPoint 指令不同之處在於本指令可以指定顏色,DrawPoint 指令則無法指定顏色。



事件

Flung(number x, number y, number speed, number heading, number xvel, number yvel, boolean flungSprite)
When Canvas.Flung : 當使用者手指滑過畫布時回傳(x,y)座標代表使用者所起始的位置,"speed"代表手指在畫布上移動的速度,"heading"表逆時針旋轉的角度,從 0 開始為水平。

(xvel, yvel)這組值代表X與Y的速度分量"FlungSprite" 代表指定動畫元件是否被使用者甩出,判定標準為距離起始點的位置


Dragged(number startX, number startY, number prevX, number prevY, number currentX, number currentY, boolean draggedSprite)
When Canvas.Dragged : 當使用者用手指頭拖拉時,觸控點會由(prevX, prevY)移到(currentX, currentY),當下的座標點皆是(currentX, currentY)。

(startX, startY)這組座標代表使用者第一次觸碰螢幕時的那一點。"draggedSprite" 代表指定動畫元件正被使用者拖拉中。


Touched(number x, number y, boolean touchedSprite)
When Canvas.Touched : 當使用者點擊畫布時,回傳(x,y)座標代表使用者所點擊的位置。如果「TouchedSprite」值為真代表某個動畫元件也正好在此位置。


TouchDown(number x, number y)
When Canvas.TouchDown : 當使用者點擊畫布時,手指放置在畫布上,並讓手指留在那裏回傳(x,y)座標代表使用者所點擊的位置。


TouchUp(number x, number y)
When Canvas.Up : 當使用者點擊畫布,手指離開畫布時回傳(x,y)座標代表使用者手指離開的位置。