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

2021-08-25 03:01:02 字數 640 閱讀 3284

概述

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

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

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

開發實錄

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

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

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

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

總結

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

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

概述 時間軸在課件工具的主要作用 便於檢視頁面各個元件的層次順序。便於選擇頁面元件,可以避免由於層次遮擋而無法選擇較下層的元件,另外在工作區隱藏的元件,通過時間軸選中隱藏的元件,再編輯其顯示狀態。開發實錄 決定時間軸面板放置的位置,面板頂部放置時間軸標尺,左上角放置組合框控制時間軸顯示比例,右邊放置...

kmdjs整合uglifyjs2打造極致的程式設計體驗

上篇文章大概展示了kmdjs0.1.x時期的程式設計正規化 如下面所示,可以直接依賴注入到function裡,var ball new ball 0,0,28,1,2,kmdjs var vp bom.getviewport 也可以直接在 裡把full namespace加上來呼叫,如 var vp...

從0打造自己的mvc框架2

2 4載入控制器 判斷控制器是否存在如果不存在就給出乙個提醒,如果存在就顯示控制器裡的內容 class indexcontroller extends core imooc 效果顯示 2 5模型類 與資料庫建立連線 首先建立乙個model類 namespace core lib class mode...