基于pixi.js的图形应用框架
Go to file
2024-02-22 16:41:22 +08:00
lib 增加网格背景 2024-02-07 11:51:44 +08:00
src 场景绑定到dom添加绑定后先执行一次视口调整 2024-02-22 16:41:22 +08:00
.editorconfig 图形应用框架,包含组件库示例和应用示例 2023-05-06 16:28:04 +08:00
.eslintrc 删除测试页面 2023-12-14 13:07:09 +08:00
.gitignore 图形应用框架,包含组件库示例和应用示例 2023-05-06 16:28:04 +08:00
.npmrc 图形应用框架,包含组件库示例和应用示例 2023-05-06 16:28:04 +08:00
.prettierrc 图形应用框架,包含组件库示例和应用示例 2023-05-06 16:28:04 +08:00
global.d.ts 路径 2023-12-15 17:11:03 +08:00
package.json 增加网格背景 2024-02-07 11:51:44 +08:00
README.md README 2023-12-14 17:12:59 +08:00
rollup.config.mjs 配置调整 2023-12-18 18:03:25 +08:00
tsconfig.json 配置调整 2023-12-18 18:03:25 +08:00
yarn.lock yarn.lock registry 2023-12-14 16:45:59 +08:00

项目说明

图形应用基础框架,基于 pixi.js(官网, API Docs) viewport 使用的 github 开源的 pixi-viewportpixi-viewport

路线图

  • 图形的位置、旋转属性使用 pixijs 的 transform 变换(完成)
  • 图形对象的拖拽使用原始的 transform(图形的变换使用原始的变换)(完成)
  • 图形交互抽象(完成)
  • 图形子元素变换处理和存储(完成)
  • 图形复制功能(完成)
  • 绘制应用图形外包围框及旋转缩放功能(完成)
  • 绘制增加吸附功能(移动到特定位置附近吸附)(完成)
  • 图形动画抽象
  • 添加公用动画逻辑(如按指定路径位移,按角度旋转、按比例缩放、透明度控制等)
  • 菜单事件及处理,功能:菜单更新、菜单项显隐控制、菜单执行前后事件回调
  • 打包
    • 分割
    • globalMixin相关的编译配置当前需打包完后手动修改index.d.ts第一行
  • 添加拖拽轨迹限制功能
  • 添加图形对象"可编辑属性"定义功能

pixijs 一些概念

  • 如果图形对象本身有碰撞检测区域,子图形的碰撞检测范围在父级的碰撞检测区域内

  • v7.2 中 eventMode 属性值的意义:

    • "none":忽略所有交互事件,且忽略其子级的交互事件。
    • "passive":不发出(emit)事件,并忽略对自身和非交互式子对象的所有命中测试。交互式子项仍将发出(emit)事件。
    • "auto":不发出(emit)事件,但如果父级是交互式的,则会进行命中测试。与 v7 中的 interactive=false 相同
    • "static":发出(emit)事件并进行命中测试。与 v7 中的 interactive=true 相同
    • "dynamic":发出(emit)事件并进行命中测试,但也会接收模拟的交互事件,以便在鼠标不移动时进行交互