HTML5 FUN : 花朵產生器

前兩天重寫了 HTML5 FUN Doodle Petals 花瓣字的花朵模組，完成後，順手弄了個「花朵產生器」，使用者可以自訂控制參數，產生自己的花朵圖案，並匯出為 SVG 或是 PNG 圖形檔。

▋ 啟動花朵產生器

按一下底下的圖示，或是紅色的按鈕，就可以開啟花朵產生器：

▋ 功能簡介

HTML5 FUN 花朵產生器截圖

上圖是 HTML5 FUN 花朵產生器的截圖。在夠寬的螢幕中，左側是參數設定區，參數改變，右側預覽的花朵也會立即更新；改到滿意了，設定區的最下方有「匯出 SVG」和「匯出 PNG」兩個按鈕，可以將花朵儲存到檔案中。

參數設定的部份，基本上是在設定區中，由上而下，一項項去設定，玩玩看，應該就可以上手了。幾個特別在此簡單說明：

• 樣版：每一個樣版會帶入花瓣的基本設定或是層數，而顏色或是其它參數請自行調整。
• 控制點半徑：改變花瓣的邊緣是圓、是尖，還是平的；是凸、是凹的。
• 花瓣層數：產生器支援多層花瓣，像上面截圖中的花朵，中央黃色的花心以外，還有兩層的花瓣；可以應用在國語課的「部件」→「字」→「語詞」。
• 層間擴展距離：控制多不同層花瓣間，外緣的距離，愈大離愈開。
• 多色：花瓣色彩模式設為「多色」時，會依不同設定，而有不同的效果
• 「一筆畫」模式時，只有設定為多層的花瓣時，才看得出「多色」的效果，一層用一個顏色，顏色依色盤順序使用。
• 不是「一筆畫」模式時，不同花瓣會依序套用色盤中的顏色，顏色數不足時，會從頭重覆使用。
• 全部填白色：如果只想留花朵的輪廓線，就勾選這一個參數，將整朵塗上白色。
• 一筆畫：這個選項啟用時，畫出的花瓣，無論設定為幾個花瓣，會以一筆畫的方式畫完，所以同層的花瓣無法用多色。未勾選時，則是以一個花瓣為單位輸出，所以每一個花瓣可以有自己的顏色。
• 連接到花心：當不是「一筆畫」時，花瓣靠中心端，可以選擇只到花心的邊緣，或是到花朵的正中心。由於差異是出現在花心內，所以這個選項要在沒有勾選「顯示中心圓」時，才看得出差異。

▋ 相關連結

• 雄:Doodle Petals : DD Petals 花瓣字
• 雄:HTML5 FUN 精選集
• 雄:SVG 轉 ODP 簡報小工具

▋ 更新記錄

• 2025.12.15 v1.0 初版。