讓房間在平面圖上整塊亮起來：圖層做法與圖層順序

charles

到目前為止燈開了只是圖示變色。這篇要做到整個房間亮起來。

做法沒有魔法：準備一張「客廳亮燈」的圖，燈開的時候顯示它，關的時候不顯示。

難的地方有兩個，而且都會讓你卡住卻查不出原因：圖層檔案要怎麼做到跟底圖完全對齊，以及圖層和圖示的先後順序寫反會發生什麼事。



步驟 1：用文字做出「亮燈圖層」，不要開圖片編輯器

亮燈圖層的要求是：跟底圖一樣大，只有那個房間的位置有顏色，其他地方全透明。

很多教學叫你用小畫家 3D 畫，那個軟體 2024 年 11 月已經從微軟商店下架；而且用滑鼠畫的方塊很難剛好落在房間的位置上，偏一點點在平面圖上就很明顯。

用 SVG 寫比較快，也一定對齊。在 File editor 新增檔案 www/floorplan/rooms/living_on.svg：

1. <svg xmlns="http://www.w3.org/2000/svg" width="1000" height="620">
2.   <rect x="0" y="0" width="400" height="312" fill="#FFD54F" opacity="0.42"/>
3. </svg>

複製代碼

四個數字的意思就是上一篇那張房間尺寸表：

1.       x      y      width  height
2. 客廳   0      0      400    312
3. 餐廳   400    0      250    312
4. 廚房   650    0      350    312
5. 玄關   0      312    180    288
6. 主臥   180    312    320    288
7. 浴室   500    312    180    288
8. 次臥   680    312    320    288

複製代碼

最外層的 width 和 height 一定要跟底圖一樣（這裡是 1000 x 620）。一樣的話瀏覽器會把整張圖層拉到跟底圖同樣大小，房間的方塊自然就落在正確位置 —— 這就是不必用滑鼠對齊的原因。

顏色建議 #FFD54F（暖黃）配 opacity 0.42。太不透明會把底圖的房間名稱和家具線條蓋掉。

你會看到什麼：瀏覽器打開 /local/floorplan/rooms/living_on.svg，會看到一片空白裡有一塊淡黃色的長方形，位置在左上角。看到就對了。

整片都是黃的代表 rect 的 width/height 打成跟 svg 一樣大了；一片空白代表 opacity 打成 0 或顏色打錯。

房間不是方的怎麼辦：把 rect 換成 polygon，用轉角的座標一路列下去。例如一個 L 形的客廳：

1. <svg xmlns="http://www.w3.org/2000/svg" width="1000" height="620">
2.   <polygon points="0,0 400,0 400,180 260,180 260,312 0,312"
3.            fill="#FFD54F" opacity="0.42"/>
4. </svg>

複製代碼

每一組 x,y 就是一個轉角，照著順時針或逆時針列完一圈。轉角的座標一樣用上一篇的量座標方法點出來，只是這次要記的是像素不是百分比。

以下還有約 82% 的內容
登入後即可閱讀完整教學

登入繼續閱讀使用 Google 登入