產生 menu-box 九宮圖
主題
完整腳本範例
| 範例 |
|---|
| demo-create-menu-box-rounded-rectangle-dark |
| demo-create-menu-box-rounded-rectangle-light |
| demo-create-terminal-box-rounded-rectangle-dark |
| demo-create-terminal-box-rounded-rectangle-light |
承接
接續「產生 menu-box-c.png」這篇學習的起點，
這篇要來介紹『如何透過「ImageMagick」製作簡易「圓角矩形」的「九宮圖」』。
九宮圖代號
| Region | Region | Region |
|---|---|---|
1. Northwest (nw) | 2. North (n) | 3. Northeast (ne) |
4. West (w) | 5. Center (c) | 6. East (e) |
7. Southwest (sw) | 8. South (s) | 9. Southeast (se) |
對應「menu box」的「圖檔名稱」如下
| Region | Region | Region |
|---|---|---|
1. menu-box-nw.png | 2. menu-box-n.png | 3. menu-box-ne.png |
4. menu-box-w.png | 5. menu-box-c.png | 6. menu-box-e.png |
7. menu-box-sw.png | 8. menu-box-s.png | 9. menu-box-se.png |
操作步驟
執行下面指令，先產生一張「圓角矩形」的「資源圖」，名稱是「mask.png」。
convert \
-size 200x200 'canvas:rgba(0,0,0,0)' \
-fill 'rgba(0,0,0,0.7)' -draw "roundrectangle 0,0,200,200,16,16" \
mask.png
執行下面指令，從「mask.png」擷取「四方的圓角」，圖片大小是「20x20」。
convert mask.png -crop '20x20+0+0' 'PNG32:menu-box-nw.png'
convert mask.png -crop '20x20+180+0' 'PNG32:menu-box-ne.png'
convert mask.png -crop '20x20+0+180' 'PNG32:menu-box-sw.png'
convert mask.png -crop '20x20+180+180' 'PNG32:menu-box-se.png'
執行下面指令，產生「除了四方圓角」的區域，圖片大小是「20x20」。
convert -size 20x20 'canvas:rgba(0,0,0,0.7)' 'PNG32:menu-box-n.png'
convert -size 20x20 'canvas:rgba(0,0,0,0.7)' 'PNG32:menu-box-e.png'
convert -size 20x20 'canvas:rgba(0,0,0,0.7)' 'PNG32:menu-box-c.png'
convert -size 20x20 'canvas:rgba(0,0,0,0.7)' 'PNG32:menu-box-w.png'
convert -size 20x20 'canvas:rgba(0,0,0,0.7)' 'PNG32:menu-box-s.png'
參考文章
| 參考文章 |
|---|
| https://legacy.imagemagick.org/Usage/draw/ |
| https://legacy.imagemagick.org/Usage/thumbnails/#rounded |
| https://stackoverflow.com/questions/718314/rounding-corners-of-pictures-with-imagemagick |