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

影片示範

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

範例題目

相關連結

更新記錄

  • 2023.12.06 支援 Google 雲端硬碟公開分享的圖片檔案;右下角的圖示可以產生 QR code。
  • 2023.12.05 長按會有一個小圓漸大的動畫,時間到自動顯示選單。
  • 2023.12.04 公開發布。
  • 2023.11.04 雛形測試版。
  • 2023.11.01 江明勳老師發想。


×

2023年11月29日 星期三

DIY : 以 3DP 鐵氟龍管補救上弦枕

2023年11月29日 星期三

前一陣子發現三十多年的古典吉他的上弦枕有裂痕(圖1),難怪彈空弦時老聽到雜音,一開始只有一根弦有這樣的問題,剪了一小片塑膠片墊在上弦枕的凹槽中,雜音就沒了;後來其它弦也有類似的情形,索性以 3D printer 用的鐵氟龍膠帶貼了兩層在弦枕上方,又暫時解決了雜音的問題。不過鐵氟龍膠帶畢竟還是薄,久了就被弦給壓破了。好吧!再發揮一下 DIY 的精神,鐵氟龍膠帶太薄了是不是!那我請出 3D printer 必備的鐵氟龍(PTFE)管,夠滑、夠硬了!

先來看看上弦枕上這明顯的裂痕:

[圖1] 在上弦枕中央有裂痕(半透明的為鐵氟龍管)

鐵氟龍管原來是 3D printer 拿來送塑料用的,

[圖2] 鐵氟龍管與已處理好的上弦枕

切一小段鐵氟龍管,並剪開後盡量攤平,讓它穩穩地蓋住上弦枕。因為鐵氟龍管用力壓是稍可塑形,所以能壓出淺淺的凹糟,凹糟雖淺,還是能固定琴弦。

[圖3] 蓋上鐵氟龍管的上弦枕

簡單的加工一下,又讓我的吉他沒惱人的雜音了。哈哈哈~剩下的雜音就是自己琴弦沒壓好的問題了 XDDD





2023年11月25日 星期六

HTML5 雷達圖產生器

2023年11月25日 星期六

上週江明勳老師提到他找到一個滿不錯的「雷達圖產生器」,但是它無法更改文字的字型大小,也無法由網址帶預設的參數......;前幾天 HTML5 圓面積小教具完成了,就開始在 GitHub 中找有沒有可以參考的程式。GitHub 中用「radar chart」的關鍵字可以找到不少專案,其中 D3.jsChart.js 相關的專案還不少。本來我已經動手用 JavaScript Canvas API 在畫雷達圖,一接觸了 Chart.js,它超強的程式庫,讓我完全不想自己「造輪子」了,直接用 Chart.js 搭配自己的前後端輸入、輸出程序就滿有樣子了,能有網路中眾高手打造的利器可用,真是件幸福的事呢!這個 HTML5 雷達圖產生器截圖如下:

HTML5雷達圖產生器截圖

使用 HTML5 雷達圖產生器

想要體驗一下這個簡易旳雷達圖產器,按一下底下的紅色按鈕,即可開啟工具:


功能簡介

底下簡單地介紹一下HTML5 雷達圖產生器的功能:

  • 可自訂圖例標題、資料向度數、字型大小、曲線張力及雷達圖片的尺寸大小。
  • 可匯出成透明背景的 PNG 圖形檔。
  • 可產生帶有參數設定值的網址,只要使用該網址,即可重現原圖的內容。

相關連結

更新記錄

  • 2023.11.27 支援多類別。
  • 2023.11.25 初版。

×
本程式使用 Chart.js 產生雷達圖
2023.11.25 v0.1 by gsyan

 

 
雄::gsyan © 2009. Design by Pocket