自制组态软件(82)UI控件库之vue3+pixijs

发布网友发布时间：2024-10-03 23:12

共1个回答

热心网友时间：2024-10-08 05:18

为了加速界面开发，我们将采用 Vue 结合 PixiJS 进行开发。首先，进行环境配置，通过封装 canvas 函数，使开发工作更加便捷。

确保 PixiJS 已成功安装，接下来创建项目文件结构。在 canvasUI\packages\renderer\src\game\index.ts 文件中，新建 PixiJS 实例并绑定至浏览器 body 对象。

在 canvasUI\packages\renderer\src\runtime-dom\index.ts 文件中，自定义渲染组件，使得 Vue 能够调用 PixiJS 在 canvas 中渲染，而非在 dom 中。

在 canvasUI\packages\renderer\src\index.ts 文件中，加载一张图片以验证渲染效果。

接着，编辑 canvasUI\packages\renderer\src\components\MyCanvas.vue，实现界面效果。最终结果如预期所示。

完整的项目代码可在 GitHub 上找到：GitHub - zhzhz/canvasUI