2023年11月初，好友江明勳老師發想一個數位工具：「可以劃一條線，把圖形切開成兩部分，每個部分都可以移動和旋轉」。以國小的數學課來說，我們常需要搭配教科書的附件，將附件中的圖形剪下、排列、黏貼......，以實體的操作讓處於具體運思期的學生，達到更理解課本內容之目的。數位工具如果搭配有觸控螢幕的載具，可以反覆的操作練習，也是另一種學習或是教學的方式。
本文中的「HTML5 東拼西湊」可以載入圖片，然後將圖片進行以下處理：
- 剪截
- 切割
- 移動
- 旋轉
- 鏡像
- 塗鴉
當然囉！這些功能也可以使用影像處理的工具，不過「HTML5 東拼西湊」是專門應用在學習上的，將界面及流程盡量簡化，希望人人可以很快地得心應手。
立即使用
想要馬上使用，就按一下這個紅色的按鈕啟動工具：
操作說明
底下就「HTML5 東拼西湊」小教具的操作，簡單地說明一下。
 |
| [圖1] HTML5 東拼西湊的截圖 |
關閉
[圖1] 是「HTML5 東拼西湊」的截圖，操作時，如果有叉叉的小圖示，按下去以後，就可以執行「關閉」的指令；最右上角是結束程式；紅色叉叉則是關掉目前的圖片，準備載入其它圖片；在圖形選單中央的叉叉，則是關閉選單。
 |
| [圖2] HTML5 東拼西湊的起始畫面 |
載入圖片
- 由檔案總管，或是其它視窗，將圖片拖曳進畫面中，即可載入圖片。
- 按一下畫面中央的圓圈，即可照相（行動載具），或是選取圖片檔案。
- 在網址輸入區中輸入有公開分享的圖片網址，由網址載入圖片。
圖片的剪裁與分割
另外一種選取方法是選用「任意形狀選取區」，它就一般所謂的「套索」，像畫筆一樣，將要選取的部份外圍，連筆「畫」一圈，畫完就立即執行剪裁的程序。
而要將圖片的某一切割出來，就按工具箱中的「新增區塊」，選完工具以後，跟前面「剪裁縮放」一樣，可以使用「矩形選取區」或是「任意形狀選取區」來設定要切割出來的範圍。
區塊的刪除與縫合
如果要刪除該區塊，則是在長按後的選單中，按一下「刪除區塊」的按鈕。
區塊的旋轉與鏡像
如果想將區塊鏡像，先按一下要處理的區塊，然後在工具箱中按「⇄」或是「⇅」，來進行水平翻轉，或是垂直翻轉。
想改變區塊的透明度，就先按一下要設定的區塊，然後在工具箱中選取透明度。
塗鴉設定選項
啟用畫筆以後，就不能再針對區塊來操作，所以如果想搬移圖片的區塊，就要先在工具箱中，按一下「停用畫筆」的按鈕。
如果想換畫筆的顏色及粗細，在啟用畫筆以後，對著工具箱以外的「畫布」，原地長按不放，0.5秒後放開，即可出現設定的選單。
塗鴉與圖片結合
塗鴉的內容和圖片是在不同層的，所以塗鴉不會跟著圖片被切割，如果想讓塗鴉的內容可以跟著圖片一起被切割，在「啟用畫筆」並塗鴉後，對準畫布，原地長按不放，0.5秒後放開，出現塗鴉的設定選單，按一下「加到圖上」的按鈕，即可將塗鴉的內容「畫」到圖片上（一種力透紙背的概念）。接著切割的內容，就是圖片和塗鴉混合的。
自訂工具箱的位置
「HTML5 東拼西湊」的工具箱，橫拿時，預設會放在左側，直拿時，預設會放在下方，如果想自訂擺放的位置，就按住工具箱空白處不放，往想放的方向拖曳後放開，程式會依所指的方向，將工具箱換過去。
影片示範
範例題目
相關連結
更新記錄
- 2023.12.06 支援 Google 雲端硬碟公開分享的圖片檔案；右下角的圖示可以產生 QR code。
- 2023.12.05 長按會有一個小圓漸大的動畫，時間到自動顯示選單。
- 2023.12.04 公開發布。
- 2023.11.04 雛形測試版。
- 2023.11.01 江明勳老師發想。
發表文章
