LCUI 2.0 发布了。LCUI 是一个用 C 语言编写的图形界面开发库,可用于构建简单的桌面应用程序。

更新概要

问题修复

  • builder: 注释结点应该被忽略 (460ee00)
  • css: 使用了未初始化的值 (44486f1)
  • font: 字体路径获取错误 (#187) (6d54685)
  • font: FontBitmap_Free() 内存泄露 (c47a6c0)
  • gui: 根部件缺少 hover 和 active 状态 (02c03c7)
  • gui: 调整空窗口的尺寸时出现段错误 (#199) (56ce0b5)
  • gui: TextCaret 应该在销毁后移除定时器 (a58b12d)
  • linux: InitLinuxKeybord() 内存泄漏 (61cadc8)
  • timer: 在移除定时器后,其回调依然会被执行 (43233b3)
  • util: dict 类型未正确导出 (20abb19)
  • windows: 未默认启用触控支持 (bc7710a)
  • 纠正变量的使用 (513b3b9)
  • 光标的位置应该在处理部件事件之前更新 (83fc949)

代码重构

  • gui: 添加 widget_background.h (d69fbb0)
  • gui: 添加 widget_border.h (843232e)
  • gui: 添加 widget_shadow.h (08ed51c)
  • gui: 改进部件更新流程 (1a50aec)

新功能

  • builder: 在出错时输出详细内容 (f7ed3b8)
  • css: 添加 flexbox 相关属性解析器 (07d2911)
  • display: 添加 LCUIDisplay_EnablePaintFlashing() (298ffa4)
  • display: 闪烁已渲染的矩形区域 (#180) (#190) (5ad4fec)
  • display: 设置最小屏幕尺寸为 320x240 (317df70)
  • gui: 添加 CSSFontStyle_IsEquals() (80d4149)
  • gui: 添加弹性盒子布局 (3cbb246)
  • gui: 更改部件原型上的 runtask() 方法的参数和调用时机 (f058916)
  • gui: 重写部件布局系统 (24e89aa)
  • gui: 滚动条部件将会在容器销毁后重置 (61e0f2c)
  • gui: 在滚动条可见时设置容器的内间距 (a436f41)
  • gui: unwrap() 将会为没给子部件触发 link 和 unlink 事件 (48344bc)
  • gui: 更新TextView 尺寸变动规则 (ea7e9d2)
  • util: 使用内联函数代替全局变量 (0991d14)

性能改进

  • display: 主窗口尺寸改变后无需添加无效区域 (b0985a2)
  • display: OpenMP 将只在渲染区域较大时启用 (1e57d9d)
  • gui: 改进部件的无效区域收集方式 (e9ea262)
  • gui: 改进 TextEdit 部件的更新流程 (bbb7cbc)
  • gui: 改进 TextView 部件的更新流程 (6824735)
  • 为部件渲染添加 OpenMP 支持 (#118) (#189) (d858333)
  • 改进表面 (Surface) 的无效区域的收集方式 (c81da29)

不兼容变动

  • util: DictType_StringKey and DictType_StringCopyKey 已改用内联函数代替
  • display: 已移除 LCUIDisplay_ShowRectBorder() 和 LCUIDisplay_HideRectBorder()
  • gui: 部件的阴影操作接口已改为私有
  • gui: 部件的背景操作接口已改为私有
  • gui: 部件的边框操作接口已改为私有
  • gui: TextView 部件必须在 UI 线程中操作
  • gui: 部件原型上的 runtask() 方法接受两个参数,并且会在每个任务被处理后调用
  • gui: 一些部件操作接口已重命名或已移除

更新说明

性能优化

新增 OpenMP 支持,重写部件更新、布局和脏矩形搜集流程,以下是详细测试报告:

  • CPU: Intel Core i5 8300H @ 2.30GHz
  • 操作系统: Windows 10
  • 测试程序: test/test_render.c
  • 测试内容: 渲染 600 帧 1600x900 动态画面,包含 3600 个部件,一个黑色透明遮罩层
  • 测试结果:
    • 开启 OpenMP 支持:耗时 11.96 秒,平均每秒渲染 50.15 帧,CPU 使用率约 88%
    • 未开启 OpenMP 支持:耗时 13.71 秒,平均每秒渲染 43.76 帧,CPU 使用率约 30%

test_render

Flex 布局

LCUI Router App 的界面对布局系统的要求较高,界面中的部分元素带有尺寸自适应特性,适合使用 Flex 布局实现,但 LCUI 之前的布局系统过于简单,无法实现此布局,为此,新版本中引入了全新的 flex 布局系统,支持用 flex-basis、flex-direction、flex-shrink、flex-grow、justify-content、align-items 属性控制布局。以下是测试程序效果:

test_flex_layout

用浏览器打开 test/test_flex_layout.html 文件可对比 LCUI 和浏览器的 flex 布局效果。

需要注意的是,这个布局系统并不完善,由于前期设计考虑不够全面,在经过后续增加的各种布局测试后,布局规则已经变得有些混乱,目前只能保证测试程序内的布局能够得到预期的效果,有待后续重构。

社区动态

本次更新共计支出 71 美元用于悬赏,接受来自贡献者的 6 个拉取请求(Pull Request),新增 3 位贡献者:d4yvectormaximelkinvbalyasnyy。由于悬赏平台是国外的,其国外用户占比很高,这点数额的悬赏对国外开发者而言吸引力较低,要是国内也有面向开源项目的悬赏平台的话,或许就能够吸引更多的贡献者了,但以现在的环境来看这个想法不现实,因为国内的代码托管平台的重心在提高收入水平上,可没有多余的资源能浪费在这种低收益的事情上。

常见问题

为什么选择实现 flex 布局而不是一个全新的布局?

主要有两个原因:

  • 为了巩固职业技能。作者在日常开发中虽然用过 flex 布局,但对它的规则并不了解,遇到问题时只会无脑调整相关属性,可以趁此次重写 LCUI 的布局系统的机会来深入研究 flex 布局。
  • 为了节省开发成本和用户学习成本。flex 布局在 Web 前端领域很常见,有 W3C 规范文档,也有其他开发者写的相关技术文章,用户学习成本低。

怎么才 50 帧?没有达到每秒渲染 120 帧 4K 尺寸画面以上的性能还好意思拿出来秀?

这个问题就需要让熟悉各种图形库的开发者来解决了,对于作者而言折腾这种职业无关的技术只是浪费时间。如果你恰好能解决此问题,但又不想免费提供技术支持,可以建一个 issue,然后描述大致的实现方式并注明你期望的悬赏金额,届时其他人觉得不错的话可能会赞助一部分赏金。

后续有何计划?

请看项目的自述文档

参考消息:https://gitee.com/lc-soft/LCUI/releases/v2.0.0