渲染布料动画

📄️ 开始

本教程将以一个 JavaScript 实现的布料模拟程序为参考对象，讲解如何将它的 JavaScript 代码转译为 C 代码，并使用 LCUI 实现相同的交互和渲染效果。注意，本文只关注如何转译，不涉及布料模拟算法。

按照一般的做法，我们将这个程序的源码按照功能类别划分为两个部分：

JS 源码开头处有一堆全局变量声明：

在 C 语言中，函数是基本执行单元，不像 JavaScript 那样允许在函数外部编写执行语句。因此，我们需要将全局执行语句移入函数中。

参与布料计算的对象有 Point 和 Span，它们的构造函数如下：

部分函数内部的代码只是一些简单的语句，基本上只需要声明局部变量即可完成转译，没必要占用过多的篇幅讲解它们，因此，下文只挑选几个较为复杂的函数进行讲解。

在 main.c 中添加头文件包含代码和 main() 函数，然后在 main() 函数中初始化 LCUi 和布料模拟相关数据：

在 LCUI 中要响应用户操作、输出渲染结果，我们需要创建一个自定义部件。创建方法是先创建原型，然后指定部件的初始化函数、销毁函数：

JS 源码中的 scaleToWindow() 函数负责调整容器和画布的宽高，它会在窗口尺寸变化时调用。

我们可以在 JS 源码末尾处看到事件绑定代码：

JS 源码中的 update() 函数通过调用 window.requestAnimationFrame() 来让 update() 能够在每次动画帧被调用，虽然 LCUI 中并没有这种函数，但可以用定时器实现类似的效果。

JS 源码中有两个函数分别用于渲染点和格子：

你已经完成了整个教程！