2023年12月4日 星期一

HTML5 : 東拼西湊小教具

2023年12月4日 星期一

2023年11月初，好友江明勳老師發想一個數位工具：「可以劃一條線，把圖形切開成兩部分，每個部分都可以移動和旋轉」。以國小的數學課來說，我們常需要搭配教科書的附件，將附件中的圖形剪下、排列、黏貼......，以實體的操作讓處於具體運思期的學生，達到更理解課本內容之目的。數位工具如果搭配有觸控螢幕的載具，可以反覆的操作練習，也是另一種學習或是教學的方式。

本文中的「HTML5 東拼西湊」可以載入圖片，然後將圖片進行以下處理：

  • 剪截
  • 切割
  • 移動
  • 旋轉
  • 鏡像
  • 塗鴉

當然囉！這些功能也可以使用影像處理的工具，不過「HTML5 東拼西湊」是專門應用在學習上的，將界面及流程盡量簡化，希望人人可以很快地得心應手。

立即使用

想要馬上使用，就按一下這個紅色的按鈕啟動工具：


操作說明

底下就「HTML5 東拼西湊」小教具的操作，簡單地說明一下。

[圖1] HTML5 東拼西湊的截圖

關閉

[圖1] 是「HTML5 東拼西湊」的截圖，操作時，如果有叉叉的小圖示，按下去以後，就可以執行「關閉」的指令；最右上角是結束程式；紅色叉叉則是關掉目前的圖片，準備載入其它圖片；在圖形選單中央的叉叉，則是關閉選單。

[圖2] HTML5 東拼西湊的起始畫面

載入圖片

「HTML5 東拼西湊」可以載入一張圖片來進行操作，啟動工具以後，會類似 [圖2] 的畫面。我們可以用以下的方法來載入圖片：
  • 由檔案總管，或是其它視窗，將圖片拖曳進畫面中，即可載入圖片。
  • 按一下畫面中央的圓圈，即可照相（行動載具），或是選取圖片檔案。
  • 在網址輸入區中輸入有公開分享的圖片網址，由網址載入圖片。

圖片的剪裁與分割

圖片載入以後，可以按一下工具箱中「剪裁縮放」的圖示，然後在圖片上設定要剪裁的範圍。預設是使用「矩形選取區」的工具來設定範圍大小，想要調整大小，就拖曳選取區的四個角落，或是邊線，設定完矩形選取區的大小以後，在矩形的中央按一下，就會執行剪裁的程序。

另外一種選取方法是選用「任意形狀選取區」，它就一般所謂的「套索」，像畫筆一樣，將要選取的部份外圍，連筆「畫」一圈，畫完就立即執行剪裁的程序。

而要將圖片的某一切割出來，就按工具箱中的「新增區塊」，選完工具以後，跟前面「剪裁縮放」一樣，可以使用「矩形選取區」或是「任意形狀選取區」來設定要切割出來的範圍。

區塊的刪除與縫合

切割完的區塊可以用拖曳的方式，將區塊搬到任何位置，如果想將它再放回未切割前的位置，可以在區塊上，原地長按不放，大概 0.5 秒放開後，會有選單跳出來，再按一下「縫回原圖」的按鈕，即可將該區塊「縫」回原始的位置。

如果要刪除該區塊，則是在長按後的選單中，按一下「刪除區塊」的按鈕。

區塊的旋轉與鏡像

如果想將區塊旋轉、先在工具箱中設定好每次要旋轉的角度，按一下要旋轉的區塊，再按「↺」或是「↻」的按鈕，來進行逆時針旋轉，或是順時針旋轉。

如果想將區塊鏡像，先按一下要處理的區塊，然後在工具箱中按「⇄」或是「⇅」，來進行水平翻轉，或是垂直翻轉。

想改變區塊的透明度，就先按一下要設定的區塊，然後在工具箱中選取透明度。

塗鴉設定選項

在工具箱中有「啟用畫筆」的按鈕，按一下，即可在畫面中塗鴉。想全部擦掉，就按一下另一個按鈕「清除塗鴉」。

啟用畫筆以後，就不能再針對區塊來操作，所以如果想搬移圖片的區塊，就要先在工具箱中，按一下「停用畫筆」的按鈕。

如果想換畫筆的顏色及粗細，在啟用畫筆以後，對著工具箱以外的「畫布」，原地長按不放，0.5秒後放開，即可出現設定的選單。

塗鴉與圖片結合

塗鴉的內容和圖片是在不同層的，所以塗鴉不會跟著圖片被切割，如果想讓塗鴉的內容可以跟著圖片一起被切割，在「啟用畫筆」並塗鴉後，對準畫布，原地長按不放，0.5秒後放開，出現塗鴉的設定選單，按一下「加到圖上」的按鈕，即可將塗鴉的內容「畫」到圖片上（一種力透紙背的概念）。接著切割的內容，就是圖片和塗鴉混合的。

自訂工具箱的位置

「HTML5 東拼西湊」的工具箱，橫拿時，預設會放在左側，直拿時，預設會放在下方，如果想自訂擺放的位置，就按住工具箱空白處不放，往想放的方向拖曳後放開，程式會依所指的方向，將工具箱換過去。

QRCode

如果載入圖片是使用輸入「圖片網址」的方式，有兩大好處：
  • 可以使用「東拼西湊」內建工具，產生帶有網址參數的分享連結，打開來就能自動開啟該圖片。
  • 可以使用「東拼西湊」內建的 QRCode 產生器，即時製作 QRCode。
使用方法很簡單，先在「HTML5 東拼西湊」的圖片網址輸入區中，輸入圖片的網址，支援 Google雲端硬碟共用的圖片哦！（存取權要設為「知道連結的任何人」可以檢視）；輸入完，並且按「載入」鈕，如果畫面上看到圖片，就可以按畫面右下角，「HTML5 東拼西湊」的小圖示來產生 QRCode了。
「HTML5 東拼西湊」的小圖示就是上面這個，哈！它可是分享（指派任務）時的利器 ^_^

影片示範

有關「HTML5 東拼西湊」的操作示範影片，在底下的網址中：

範例題目

相關連結

更新記錄

  • 2024.04.12 新增可以在圖片下方加上方格紙的選項
  • 2023.12.12 分割的區塊長按後，多一個「再次分割」的選項，可以再設定範圍切割；剪截支援任意形狀。
  • 2023.12.06 支援 Google 雲端硬碟公開分享的圖片檔案；右下角的圖示可以產生 QR code。
  • 2023.12.05 長按會有一個小圓漸大的動畫，時間到自動顯示選單。
  • 2023.12.04 公開發布。
  • 2023.11.04 雛形測試版。
  • 2023.11.01 江明勳老師發想。


×
By at
標籤: , ,

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)
 
雄::gsyan © 2009. Design by Pocket