iT邦幫忙

鐵人檔案

2024 iThome 鐵人賽
回列表
佛心分享-SideProject30

收納規劃APP 系列

對於家具擺放跟收納深感困擾,決定自己做個東西來整理

鐵人鍊成 | 共 32 篇文章 | 4 人訂閱 訂閱系列文 RSS系列文
DAY 1

Day1:使用者故事

最近搬家,搬進一個簡裝的家庭式,對於家具擺放跟收納深感困擾,決定自己做個東西來整理 可以想像是在平面圖上點家具,之後會出現這個家具裡面收納了什麼東西 利用Ang...

2024-09-15 ‧ 由 Zoe Wu 分享
DAY 2

Day2:拖曳功能:聖誕卡片

因為要擺放家具,所以首要的重要功能就是需要拖曳家具,第二天先拆解這個功能出來練習目標是拖曳emoji進去卡片之中首先要安裝cdk npm install @an...

2024-09-16 ‧ 由 Zoe Wu 分享
DAY 3

Day3:縮放功能

ts檔不變,把縮放的功能抓出來放在directive,方便未來的應用這裡用三種形狀展示,分別是矩形、圓形、圓角矩形今天的內容一樣也放在 StackBlitz 首...

2024-09-17 ‧ 由 Zoe Wu 分享
DAY 4

Day4:旋轉功能

程式碼也在 StackBlitz一樣把功能提到 directive 才好重覆使用在 AppModule 宣告 RotatableDirective import...

2024-09-18 ‧ 由 Zoe Wu 分享
DAY 5

Day5:ngx-moveable 實作拖曳、縮放、旋轉功能

要把三個功能合併的時候,決定還是用別人的套件了,時間有限這裡實作 矩形跟圓形官方的storyBook就有範例了 程式碼依舊在Stackblitz 首先先安裝 n...

2024-09-19 ‧ 由 Zoe Wu 分享
DAY 6

Day6:ngx-moveable 變形功能之三角形處理 (同場加映Canvas)

寫到一半,突然意識到有角架、角櫃的存在,所以開始跟三角形搏鬥希望可以藉由點擊頂點來改變三角形的形狀,但是 ngx-movable 跟我理想的情況有點差距,所以寫...

2024-09-20 ‧ 由 Zoe Wu 分享
DAY 7

Day7:加入平面圖

功能拆開的時候都很快樂,合併的時候才知道合不合適就算有先規劃順序,但還是有種瞎子摸象的感覺 操作環境跟程式碼 Day7 import { Component,...

2024-09-21 ‧ 由 Zoe Wu 分享
DAY 8

Day8:平面圖疊家具(一)

這個部份我大概卡了一、兩個禮拜,還沒卡完,雖然是30天連續發文的鐵人賽,但是 side project 應該會做超過30天。 把東西疊在一起之後開始出現問題,腦...

2024-09-22 ‧ 由 Zoe Wu 分享
DAY 9

Day9:平面圖疊家具(二)

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

2024-09-23 ‧ 由 Zoe Wu 分享
DAY 10

Day10:瀏覽器座標 vs SVG 座標演示

經歷了暴風重寫之後的感想計算的時候如果沒有轉換成 SVG 座標系統,SVG移動的位置計算就會以瀏覽器的為主,如果有置中或是padding一定就會偏移,而且XY軸...

2024-09-24 ‧ 由 Zoe Wu 分享