Return to Video

繪製文字(一)

  • 0:00 - 0:03
    目前大家都做過不少繪圖(drawing)了
  • 0:03 - 0:04
    不過有些比較簡單的功能還沒講過
  • 0:04 - 0:08
    例如加上自己的名字，這剛好
    與本課要教的文字(text)相關
  • 0:08 - 0:10
    至於那種情形下會用上?
  • 0:10 - 0:12
    應用範圍包括顯示遊戲積分
  • 0:12 - 0:14
    角色扮演，或放大縮小名字顯示
  • 0:14 - 0:15
    以及改變字體顏色
  • 0:15 - 0:20
    接下來我們要嘗試顯示文字hello
  • 0:21 - 0:24
    不過實際輸入指令text(hello)
    卻意外觸發錯誤提示訊息
  • 0:24 - 0:27
    提示「未定義hello」，這是甚麼意思呢?
  • 0:27 - 0:29
    問題在於程式本身
  • 0:29 - 0:31
    把「hello」視為變數(variabke)
  • 0:31 - 0:34
    以程式邏輯而言，這反應很正常
  • 0:34 - 0:36
    「hello」的確有可能是變數
    程式很難自行判斷
  • 0:36 - 0:39
    要讓程式把「hello」視為文字
  • 0:39 - 0:41
    其實也不難，只要記得
  • 0:41 - 0:43
    把hello擺在英文的引號(" ")中即可
  • 0:43 - 0:45
    如此程式便不會將其視為變數
  • 0:45 - 0:46
    並解讀為文字
  • 0:46 - 0:48
    或以文字顯示
  • 0:48 - 0:50
    不妨這樣記比較容易
  • 0:50 - 0:52
    書中的人物對話
  • 0:52 - 0:53
    都會加註引號
  • 0:53 - 0:56
    同樣的，若你希望程式像說話一樣表達
  • 0:56 - 0:58
    文字當然也要加註英文引號
  • 0:58 - 1:01
    這點真的很重要，但也很容易搞混
  • 1:01 - 1:04
    再強調一次，只要程式內添加文字
  • 1:04 - 1:06
    一定要在兩旁
  • 1:06 - 1:08
    包夾英文的引號
  • 1:08 - 1:10
    不然很可能會看到
    剛才那樣的錯誤訊息
  • 1:10 - 1:12
    若不幸遇此狀況
  • 1:12 - 1:15
    記得檢查文字是否夾在英文引號中
  • 1:15 - 1:17
    很好! 加註英文引號後
  • 1:17 - 1:19
    就不會再出現錯誤訊息了
  • 1:19 - 1:21
    不過你可能也發現程式毫無反應
  • 1:21 - 1:22
    畫面仍是空白
  • 1:22 - 1:25
    不過說也奇怪，若輸入文字背景("background")
  • 1:25 - 1:29
    就用紅色好了，內容就出現了
  • 1:29 - 1:33
    只不過是白字，所以仔細思考問題癥結
  • 1:33 - 1:36
    剛才是在白底上寫白字
  • 1:36 - 1:38
    自然看不見內容
  • 1:38 - 1:40
    這或許有點蠢
  • 1:40 - 1:43
    文字顏色怎會採用背景色呢?
  • 1:43 - 1:46
    不過我們學過填色
  • 1:46 - 1:47
    所以能改
  • 1:47 - 1:50
    就像設定長方形或線條填色一樣
  • 1:50 - 1:52
    也可任意設定文字填色
  • 1:52 - 1:54
    就像之前做過的那樣即可
  • 1:54 - 1:56
    不用設定背景也能看到文字
  • 1:56 - 1:59
    接著我們再深入一些文字設定
  • 2:00 - 2:02
    首先不用說也看得出來
  • 2:02 - 2:04
    就是任意輸入文字
  • 2:04 - 2:07
    接著若調整數值
  • 2:07 - 2:09
    文字也會左右移動
  • 2:09 - 2:12
    另外也能垂直定位
  • 2:12 - 2:13
    這和我們之間做過的
  • 2:13 - 2:15
    繪製長方形的過程很像
  • 2:16 - 2:18
    不過比較棘手的就是
  • 2:18 - 2:20
    文字的這2個座標
  • 2:20 - 2:24
    界定文字框左下角的位置
  • 2:24 - 2:28
    不過長方形的座標卻是指定左上角
  • 2:28 - 2:31
    好像是故意要讓人搞混的
  • 2:31 - 2:33
    不過你還是得記起來
  • 2:33 - 2:35
    而且我們自己試一下就知道了
  • 2:35 - 2:39
    把第2個座標值改成height
  • 2:39 - 2:42
    文字高度便會貼齊左下角座標
  • 2:44 - 2:46
    和將該值設定為零
  • 2:46 - 2:49
    猜猜看結果會如何?
  • 2:50 - 2:53
    起初什麼也看不見，但若增加數值
  • 2:53 - 2:56
    文字就逐漸降臨
  • 2:56 - 3:00
    因為界定的是左下角的座標
  • 3:00 - 3:01
    而非左上角
  • 3:01 - 3:05
    好，文字的功能分析到此為止
  • 3:05 - 3:07
    我們繼續深入其他功能
  • 3:07 - 3:09
    例如放大字體
  • 3:09 - 3:11
    輸入textSize後
  • 3:11 - 3:14
    程式就會據此決定文字大小
  • 3:14 - 3:16
    例如在括號中填入30，字體就會很大
  • 3:16 - 3:18
    甚至還可放得更大
  • 3:18 - 3:20
    也可縮得很小 ─任你決定
  • 3:20 - 3:23
    接下來就寫上自己的名字
  • 3:23 - 3:26
    底下附上一些自我介紹的訊息
  • 3:26 - 3:29
    因我只知自己的名字，就拿來當例子了
  • 3:29 - 3:31
    待會你們再換成自己的
  • 3:31 - 3:34
    立刻學以致用，輸入text("Sophia")
  • 3:34 - 3:36
    我的名字就出現了
  • 3:36 - 3:38
    或許底下再加上一些簡單介紹
  • 3:38 - 3:43
    例如：「我喜歡小狗、吉他和寫程式。」
  • 3:43 - 3:46
    看來不錯，除了顯然還需要
  • 3:46 - 3:49
    還需要調整位置才不會重疊
  • 3:49 - 3:51
    不過畫面好像塞不下那麼多字
  • 3:51 - 3:55
    所以稍微縮小一下字體
  • 3:57 - 3:59
    好了，看來還不錯!
  • 3:59 - 4:01
    除了2行文字都是藍色看來有點單調
  • 4:01 - 4:04
    所以稍加改變文字填色
  • 4:04 - 4:07
    或許可換成比較好看的顏色
  • 4:07 - 4:10
    像是紫色
  • 4:10 - 4:12
    這樣就完成了
  • 4:12 - 4:16
    以上所講的就是文字繪製、套色和設定大小
Title:
繪製文字(一)
Description:

本影片為實作影片講解剪輯，目的為便於字幕製作與翻譯。更完整的影片目錄請見
https://www.khanacademy.org/cs/programming/
more » « less
Video Language:
English
Duration:
04:19

Chinese, Yue subtitles

Revisions

Our website uses cookies for analysis purposes.