平面圖上的圖示怎麼放到對的位置：三個量座標的方法

charles

這篇的內容（6 段）

1. 四個讓座標好調的寫法
2. 一、style 寫成一行
3. 二、用整數
4. 三、同一排用同一個 top
5. 四、圖示離牆至少 5%
6. 調完一定要用手機實際點一次

先講一件會讓你少調半小時的事：picture-elements 卡片沒有圖形編輯器。

你點「編輯卡片」只會看到一個 YAML 程式碼編輯器，沒有元素清單、也沒有可以拖的預覽圖。很多教學寫「直接在預覽圖上把圖示拖到你要的位置」—— 那個畫面不存在，找不到不是你的問題。

座標只能用數字給。好消息是量座標比想像中快，這篇給三個方法，第一個大概三十秒就能量完一整張圖。



開始之前：top 和 left 指的是「中心」不是左上角

這件事官方文件有寫，但幾乎所有教學都略過，結果是你調到後來每個圖示都偏一點點，而且偏的量還隨圖示大小變。

picture-elements 的元素預設帶著一條樣式 transform: translate(-50%, -50%)，意思是：你給的 top / left 會落在元素的正中心。

1. style:
2.   top: 25%
3.   left: 20%
5. 這個圖示的「中心點」會落在
6. 距離圖片上緣 25%、左緣 20% 的位置

複製代碼

所以你量的時候就直接量「我希望這個圖示的中心在哪裡」，不用額外補半個圖示的寬度。

真的想改成左上角對齊的話，加一行 transform: none 就會關掉這個行為 —— 但除非你在做很精細的排版，不要關，維持中心對齊調起來快很多。

步驟 1：先把底圖的尺寸記下來

後面兩個方法都要用到。

在電腦上對著圖片檔按右鍵 -> 內容 -> 詳細資料（Mac 是「取得資訊」），看寬和高。

這篇後面一律用這張示範圖：1000 x 620 px，七個房間。

1.       X      Y      W      H
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

複製代碼

步驟 2：方法一 —— 在瀏覽器上直接點出座標（最快）

這個方法不用裝任何東西，點一下就直接印出可以貼的百分比。

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

登入繼續閱讀使用 Google 登入