產品開發實錄 2 打造時間軸

概述

時間軸在課件工具的主要作用：

便於檢視頁面各個元件的層次順序。

便於選擇頁面元件，可以避免由於層次遮擋而無法選擇較下層的元件，另外在工作區隱藏的元件，通過時間軸選中隱藏的元件，再編輯其顯示狀態。

開發實錄

決定時間軸面板放置的位置，面板頂部放置時間軸標尺，左上角放置組合框控制時間軸顯示比例，右邊放置垂直滾動條，右下方放置水平滾動條，左下方能夠騰出空間放置一些操作按鈕和文字標籤等。這樣，時間軸的輪廓基本定好了。

現在開始設計時間軸的子項，先實現時間軸子項的繪製，背景刻度與標尺保持一直，子項垂直按一定順序排列。

實現時間軸子項的頭效果，子項頭由【操作按鈕】+【圖示】+【類別標籤】組成，現在多了些圖示和文字，效果不錯吧。

現在實現時間軸子項的選擇效果，選擇控制是製作時間軸的其中乙個難點，要支援多選，和工作區進行選擇同步、操作同步等，有許多細節的操作要考慮，例如，工作區新增、刪除元件，編輯元件名稱，undo/redo等。

總結

該文是乙個產品模組的開發記錄，其中的設計思路(介面設計，功能設計，開發流程等)能作參考，舉一反三。由於關注的粒度不同，這裡的焦點是乙個模組，所以不會給出具體一行行的**。