基于 canvas 的 UI 框架 (浏览器里套娃实现浏览器)
发布于 18 天前 作者 c7js 10105 次浏览 来自 分享

C7 是一个基于 canvas 的 UI 框架. 众所周知, canvas API 仅仅提供了非常底层的诸如 drawLine / drawRect / fillColor 之类的操作, 如果单单利用这些 API 来构建复杂的页面, 将会极其繁琐. 而 C7 将你从这样的繁琐过程中解脱出来, 它将现代前端开发的关键技术在 canvas 上重新实现了一遍(不借助任何第三方库), 包括:

  • 声明式的标签(例如: <button>, <image>, 甚至 <input>)
  • 支持 Flex 布局的排版引擎
  • 常用的 CSS 样式
  • MVVM
  • 时间轴和动画
  • 兼容移动端的手势操作
  • 开箱即用的脚手架 和 支持热重载的开发服务器
  • 等等 只要你会使用 HTML / CSS / JavaScript / Vue 来写代码, 那么你上手 C7 就是零成本.

GitHub: C7 (a canvas-based UI framework)

顺便, 求工作…

9 回复

@c7js 欢迎大佬来简历

玩玩就好。 移动端下显示不行。 下拉框超出可视范围了,就选不上了。

@ganshiqingyuan 没有暴露 API 啊, 用各种框架的目的不也是为了避免直接操作 DOM 吗 ?

@JZLeung 加个 scroll 什么的并不是什么难事

@c7js 那你这个不是和 flutter/cocos 网页版类似

@ganshiqingyuan 是的, 可以算作一个简单版的 flutter, 但是相比于 flutter 需要 Dart 的学习成本以及套 widget 的难受写法, 我这个完全是 0 成本.

https://github.com/huruji/vuvas 和我之前写的这个差不多,我们正在招人,字节跳动,坐标深圳,感兴趣的话欢迎来一份简历呀,可以发我邮箱 huruji3@foxmail.com @c7js

@huruji 人在北京…所以算啦~ 大致看了下你这个, 是基于 @vue/runtime-core 和 yoga-layout 来做的, 我这个的亮点在于这些东西都是手写实现的, 因为起初写它的原因就是为了学习相应技术的实现原理, 所以就没有依赖第三方代码. 多谢啦~

回到顶部