iT邦幫忙

2024 iThome 鐵人賽

DAY 9
1
佛心分享-SideProject30

收納規劃APP系列 第 9

Day9:平面圖疊家具(二)

  • 分享至 

  • xImage
  •  

因為搞不清楚到底什麼問題導致各種偏移,所以從SVG開始重新做,只保留兩個控制點跟一個圖形
去掉底圖的控制功能跟固定功能,開始抓蟲

本來以為可以用AI處理bug,推土機式直接硬推過去,
看來是不夠力,可能也是之前的我不清楚問題點,所以沒辦法解掉
現在重新來一次,釐清一下問題跟思路

  1. 平面圖有自己的中心點
  2. 各個家具也有自己的中心點
  3. 各自都有自己的長寬跟旋轉角度
  4. 瀏覽器視窗的座標,跟相對於SVG的座標不一樣

繼續往下整理細分

  1. 平面圖有自己的中心點、長寬跟旋轉角度
    1. 要可以ZoomIn、ZoomTo、ZoomOut
    2. 不用改變長寬
    3. 依自己中心點旋轉
    4. 可以復原
  2. 各個家具也有自己的中心點、長寬跟旋轉角度
    1. 要有圓型控制點,來控制旋轉、變形
    2. 家具形狀
      1. 矩形
      2. 圓角矩形
      3. 圓型
      4. 三角形
      5. 多邊形
    3. 當長寬改變了,中心點會跟著改變
    4. 依中心點旋轉
    5. 當固定後依平面圖旋轉
    6. 可以取消固定
    7. 可以回上一步
    8. 輸入長寬

畫線是先放棄的部分,△是可能還有機會做出來

實作之後,確認了主要的問題點(座標與中心點),不過旋轉後調整大小還是會有bug,
那個長寬計算感覺有點小複雜,旋轉角度越大,長寬計算偏移越多,懇請先調大小再旋轉,
而且把家具模組化一直失敗,好想拿殺蟲劑噴電腦/images/emoticon/emoticon70.gif

本日的進度,是基礎版的平面圖操作,程式碼請看 ->Day9


上一篇
Day8:平面圖疊家具(一)
下一篇
Day10:瀏覽器座標 vs SVG 座標演示
系列文
收納規劃APP32
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言