{"id":13341579,"url":"https://github.com/Lifeni/object-oriented-canvas","last_synced_at":"2025-03-11T22:31:12.550Z","repository":{"id":49598471,"uuid":"369838121","full_name":"Lifeni/object-oriented-canvas","owner":"Lifeni","description":"一个基于面向对象分析与设计的画布 APP，用 Electron 做的。","archived":true,"fork":false,"pushed_at":"2021-06-18T14:39:30.000Z","size":1485,"stargazers_count":4,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-10-24T10:06:41.271Z","etag":null,"topics":["canvas","electron","web-components"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Lifeni.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-05-22T15:08:36.000Z","updated_at":"2023-11-02T08:20:45.000Z","dependencies_parsed_at":"2022-09-03T10:22:11.113Z","dependency_job_id":null,"html_url":"https://github.com/Lifeni/object-oriented-canvas","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Lifeni%2Fobject-oriented-canvas","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Lifeni%2Fobject-oriented-canvas/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Lifeni%2Fobject-oriented-canvas/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Lifeni%2Fobject-oriented-canvas/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Lifeni","download_url":"https://codeload.github.com/Lifeni/object-oriented-canvas/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243125121,"owners_count":20240263,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["canvas","electron","web-components"],"created_at":"2024-07-29T19:25:38.933Z","updated_at":"2025-03-11T22:31:11.832Z","avatar_url":"https://github.com/Lifeni.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"![主界面](./docs/main.webp)\n\n# Object-oriented Canvas\n\n![Version](https://img.shields.io/github/package-json/v/Lifeni/object-oriented-canvas)\n![GitHub](https://img.shields.io/github/license/Lifeni/object-oriented-canvas)\n\n这是一个基于面向对象分析与设计的画布 App，也是软件代码开发技术的课程设计。\n\n## 功能\n\n包括但不局限于下面的功能:\n\n- 🖌 基本的绘图功能，包括直线、圆（椭圆）、矩形（正方形）、文字、图片\n\n- 🎨 为数不多的自定义功能，包括线的宽度和颜色、字体类型大小和颜色\n\n- 💿 保存和读取画板数据文件（JSON格式）\n\n- 📷 导出画板为 PNG、JPG 和 WebP 格式\n\n- ⌨ 可能会有 Bug 的撤销和重做功能（仅快捷键）\n\n- 🌐 局域网共享画板功能（不是局域网应该也行）\n\n也可以直接去 [Releases](https://github.com/Lifeni/object-oriented-canvas/releases) 里下载最新版体验一下。\n\n### 不足之处\n\n这个项目还有很多的不足之处，比如:\n\n- ❌ 占用内存多（200MB+）\n\n- ❌ 打开比较慢（可能因为是单文件）\n\n- ❌ 没有画笔功能（懒得做了）\n\n- ❌ 没有图形的移动和修改（也是懒得做了）\n\n- ❌ 没啥注释（有，但不完全有）\n\n这个项目的使命（课程大作业）已经完成了，我也只是想体验一下 Electron 和 RxJS，\n\n所以未来这个项目不一定会更新了，不过 Bug 应该还会修一修的。\n\n## 技术\n\n开始写这个项目的时候就计划用尽量少的依赖来做，然后用面向对象的思想开发。\n\n平台方面，用的是 Electron，理论上支持 Windows、Linux 和 macOS；用户界面上，用 TypeScript + Web Components 实现，UI 模仿的是 Figma；数据方面，用 mitt 和 RxJS 对事件进行绑定和处理；目前没有用前端的打包工具，仅使用 tsc 处理 TypeScript 文件。\n\n未来可能会使用 Lit 来重构 UI 界面，并且移除 mitt，全部使用 RxJS。\n\n## 开发\n\n开发环境需要 Node.js 14+ 以及 Yarn。\n\n推荐安装 `electronmon` 和 `concurrently` 和 `rimraf` 来运行开发环境。\n\n```shell\n# 可以安装到全局环境\nyarn global add electronmon concurrently\n\n# 启动开发环境，\n# 自动监听文件改动并重启应用\nyarn dev\n```\n\n\u003e 注意：启动开发环境后，应用可能会报错或者自动重启一次，这是因为代码编译和运行是同时进行的，但是编译的速度比运行慢，应用在运行后可能找不到文件（还没编译完）或者运行的不是最新的代码（上一次编译的缓存），等到最新的代码编译完就可以正常运行了。\n\n运行 `yarn build:win` 编译并打包成单文件版的 exe 文件，初次运行需要联网下载编译工具，请耐心等待。\n\n## 开源协议\n\nMIT License\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FLifeni%2Fobject-oriented-canvas","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FLifeni%2Fobject-oriented-canvas","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FLifeni%2Fobject-oriented-canvas/lists"}