2021年5月27日 星期四

HTML5 : WHEEL 幸運轉輪更新

2021年5月27日 星期四

本來只是想將 HTML5 WHEEL 幸運轉輪加個按鈕而已,結果一發不可收拾,連玩了幾天,多了一些新的功能:

  1. 新增轉動轉盤的按鈕。
  2. 盤面選項可以使用圖片。
  3. 圖片支援 .SVG 及 Data URI 格式。
  4. 圖片可以設定使用圓框。
  5. 盤面的文字及圖片可以設定對齊方式。
  6. 盤面及對話框的字形自動調整大小。
  7. 可利用網址加上 ?filename=xxxxx 的方式指定要使用的設定檔檔名。
  8. 設定檔中新增 wheel_colors 的參數,供自訂轉盤上要使用的顏色代碼。
  9. 設定檔中新增兩個可自訂欄位及素材分隔符號的參數。
  10. 畫面左下角有隱藏式工具箱,內有三個功能按鈕,可供重置轉盤、輸入題目及設計、查看使用說明。
  11. 拖曳圖片檔案至題目輸入區,自動轉為 Data URI base64編碼的圖片資料。

2021.05.27 .v4 的 HTML5 WHEEL


同時使用三種素材的題目

HTML5 WHEEL 幸運轉輪可以在 HTML5 FUN 中玩,或是下載檔案回來自訂題庫:


臨時想要更改題目,可以打開左下角的工具箱

按左下角的箭頭打開工具箱

在工具箱中按「輸入」即可即時改題目內容

按「輸入」載入現有題目

在題目編輯器上除了可以修改題目,也能設定選項

HTML5 WHEEL 題目編輯器

在編輯器中,一行一個題目,空白行會自動省略。可以是純文字,或是圖片的檔名。

如果圖片的大小不大(畫面顯示,建議 640x480 左右即可),圖片也可以由資料夾中,將選取好的圖片檔案,以拖曳的方式,拉到輸入區中。它會將圖片檔案的資料編碼過後,附加在原有題目的後面;甚至可以一次拖曳多個圖片。

底下的影片示範如何以拖~拉~放~~的方式新增圖片的題目:


如果圖片是直接由瀏覽器中拖曳過來的,而它的網址結尾是 .jpg、.png、.gif、.svg,則該網址會被附加到題庫的最後面。

如果都修改好了,按「套用」的按鈕即可開始玩。

要特別注意的是,即時修改的題目並不會儲存起來。如果有重覆使用的需求,目前還是需要將將設定寫入設定檔 wheel_set.js 檔案中。詳細的說明請參考之前這篇舊文:


圖片圓框設定與否的比較如下:

沒有圓框的圖片
有圓框的圖片

前面的例子,小狗的照片長寬比不是 1:1,如果是正方形的照片,設了圓框,照片會被切成圓形的。



相關文章







0 意見:

張貼留言

 
© 2009. Design by Pocket