项目说明

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

路线图

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

pixijs 一些概念

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

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

  • "none"：忽略所有交互事件，且忽略其子级的交互事件。

  • "passive"：不发出(emit)事件，并忽略对自身和非交互式子对象的所有命中测试。交互式子项仍将发出(emit)事件。

  • "auto"：不发出(emit)事件，但如果父级是交互式的，则会进行命中测试。与 v7 中的 interactive=false 相同

  • "static"：发出(emit)事件并进行命中测试。与 v7 中的 interactive=true 相同

  • "dynamic"：发出(emit)事件并进行命中测试，但也会接收模拟的交互事件，以便在鼠标不移动时进行交互

Install the dependencies

yarn
# or
npm install

Start the app in development mode (hot-code reloading, error reporting, etc.)

quasar dev

Lint the files

yarn lint
# or
npm run lint

Format the files

yarn format
# or
npm run format

Build the app for production

quasar build

Customize the configuration

See Configuring quasar.config.js.