- Clone this repository
git clone git@github.com:zhangdiwaa/react-paperjs-test.git
- Install the dependencies
yarn install
- Start the app
yarn start
- Open http://localhost:4321 to view it in the browser.
本项目基于以下类库制作。 This project is based on:
- react
- typescript
- ant design
- paper.js
- src
- |---- MyCanvas //与paper.js相关的功能组件
- |---- |---- MyCanvas.tsx //主画布生成与初始化组件
- |---- |---- PaperTools.tsx //paper.js交互工具组件
- |---- |---- Brush.tsx //笔刷交互工具组件
- |---- |---- ColorPicker.tsx //调色板工具组件
- |---- |---- keyboard.tsx //快捷键组件
- |---- |---- Layout.tsx //布局组件
- |---- |---- PointText.tsx //文字交互组件
- |---- |---- shape.tsx //插入不同形状的线条
- |
- |---- UI //界面相关的组件
- |---- |---- HeaderBar.tsx //界面首部及其按钮组
- |---- |---- siderBar.tsx //界面侧边栏及其按钮组
- |---- |---- Layers.tsx //界面右下角图层列表
- |---- |---- Overview.tsx //界面右上角概览视图
- |
- |---- Common //通用组件
- |---- |---- Config.tsx //配置相关json
- |---- |---- Observer.tsx //发布订阅模式功能
- |---- |---- UndoAndRedo.tsx //撤销和重做功能
- |
- |---- App.tsx //入口组件
- |---- App.css //全局样式文件
- 剩余文件都是create-react-app 默认的文件
更新了antDesign插件到4.0.2版本
- yarn upgrade-interactive --latest // 使用此命令更新依赖包。注意此命令输入后还需要手动选择升级的依赖包,按空格键选择,a 键切换所有,i 键反选选择,回车确定升级 经测试,可以使用如上更新函数更新全部依赖,不会出现冲突。