@H_403_0@
@H_403_0@1:设计、开发一个基于 Canvas 的 UI 框架系统,由于系统相对比较复杂,需接管浏览器构建的整个过程:
@H_403_0@
@H_403_0@
@H_403_0@2:布局系统 css layout.
@H_403_0@UI 组件基于「文本」与「图像」。但 framework,除了 UI 组件本身以外,还需要有 Layout,而 css 只适用于浏览器本身的 layout 而无法适用于 Canvas 画布。
要给开发者好且排版可控的方案,那就要开发一个用 JavaScript 实现类似 CSS 的布局子集的框架。
否则 UI 的组件在画布上没有 layout 就无意义。
这个布局框架实现成本(简单实现)理论上并不大,大的是在于未来增加新 Feature 并相互组合时与浏览器本身有差异,需要有完整的 unit test。
正好最近 facebook 也开源了一个用 JavaScript 写 css layout 子集的解决方案,实现了:
- padding
- width
- margin
- border
- flex
- position( relative/absolute )
等等。
github 地址: facebook/css-layout · GitHub
这些 css 布局子集基本能满足我们前期开发预期。 @H_403_0@
@H_403_0@3:开发框架.
用 css-layout 再加上 UI 管理层,就可以比较清晰的实现出 canvas 的 UI 组件框架了。
那么,剩下的事就是: