74 lines
2.0 KiB
Markdown
74 lines
2.0 KiB
Markdown
|
# 项目说明
|
||
|
|
|
||
|
|
图形应用基础框架，基于 pixi.js([官网](https://pixijs.com/), [API Docs](https://pixijs.download/release/docs/index.html))
|
||
|
|
viewport 使用的 github 开源的 pixi-viewport[pixi-viewport](https://github.com/davidfig/pixi-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
|
||
|
|
|
||
|
|
```bash
|
||
|
|
yarn
|
||
|
|
# or
|
||
|
|
npm install
|
||
|
|
```
|
||
|
|
|
||
|
|
### Start the app in development mode (hot-code reloading, error reporting, etc.)
|
||
|
|
|
||
|
|
```bash
|
||
|
|
quasar dev
|
||
|
|
```
|
||
|
|
|
||
|
|
### Lint the files
|
||
|
|
|
||
|
|
```bash
|
||
|
|
yarn lint
|
||
|
|
# or
|
||
|
|
npm run lint
|
||
|
|
```
|
||
|
|
|
||
|
|
### Format the files
|
||
|
|
|
||
|
|
```bash
|
||
|
|
yarn format
|
||
|
|
# or
|
||
|
|
npm run format
|
||
|
|
```
|
||
|
|
|
||
|
|
### Build the app for production
|
||
|
|
|
||
|
|
```bash
|
||
|
|
quasar build
|
||
|
|
```
|
||
|
|
|
||
|
|
### Customize the configuration
|
||
|
|
|
||
|
|
See [Configuring quasar.config.js](https://v2.quasar.dev/quasar-cli-vite/quasar-config-js).
|