base on 🎨 Pictode最方便集成的绘图工具 # Pictode 🎨 Welcome to **Pictode** - your canvas for unlimited creativity! 🚀  [Experience it now](https://pictode.com) [简体中文](README.zh-CN.md) | English **Pictode** is a canvas project built on cutting-edge technologies like Vue 3, TypeScript, Konva, HeadlessUI, and Tailwind CSS. It empowers you to draw, create, and express your creativity freely. ✨ ## Local Setup - Clone the repository locally ```shell git clone https://github.com/JessYan0913/pictode.git ``` - Install dependencies ```shell cd pictode npm i -g pnpm pnpm bootstrap ``` - 启动项目 ```shell pnpm pictode ``` - 访问项目`http://localhost:8800` ## 🖌️ Drawing Tools **Pictode** offers a range of drawing tools, from simple rectangles to intricate lines, allowing you to craft your unique artworks. 🎨 - Unleash your doodling talent with the **✏️ Pencil tool**. - Insert photos and colorful elements into your canvas with the **📷 Image tool**. - Express your thoughts and ideas with the **🖋️ Text tool**. - Create perfect geometric shapes like **🟩 Rectangles**, **🔶 Diamonds**, and **🟤 Ellipses**. ## 🪄 Import and Export Share your artistic creations with the world! **Pictode** supports various import and export options, including JPG, PNG, and JSON formats. 📤📥 - Export your projects and share them with friends or colleagues. - Import others' projects to gain inspiration and make edits. ## ✨ Enhanced by Plugins **Pictode** offers various plugins to cater to diverse needs. [](https://codesandbox.io/p/sandbox/pictode-playground-7rm8zq?file=%2Fsrc%2FApp.vue%3A1%2C1) ### 🕒 History Plugin 1. Install the `@pictode/plugin-history` dependency. ```shell npm install @pictode/plugin-selector ``` 2. Instantiate the historyPlugin plugin. ```ts import { HistoryPlugin } from '@pictode/plugin-history'; const historyPlugin = new HistoryPlugin(); ``` 3. Use the app.use(historyPlugin) method to load the plugin. ```ts app.use(historyPlugin); ``` 4. You can now implement undo and redo functionality with the app.undo() and app.redo() methods. ### ✅ Selector Plugin 1. Install the @pictode/plugin-selector dependency. ```shell npm install @pictode/plugin-selector ``` 2. Instantiate the selectorPlugin plugin. ```ts import { SelectorPlugin } from '@pictode/plugin-selector'; const selectorPlugin = new SelectorPlugin(); ``` 3. Use the app.use(selectorPlugin) method to load the plugin. ```ts app.use(selectorPlugin); ``` 4. Implement selecting and deselecting shapes using mouse clicks or the app.select(...) and app.cancelSelect(...) methods. Hold down the Shift key to enable multi-selection and deselection. ### 🔄 Alignment Tools 1. Install the @pictode/plugin-alignment dependency. ```shell npm install @pictode/plugin-selector ``` 2. Instantiate the alignmentPlugin plugin. ```ts import { AlignmentPlugin } from '@pictode/plugin-alignment'; const alignmentPlugin = new AlignmentPlugin(); ``` 3. Use the app.use(alignmentPlugin) method to load the plugin. ```ts app.use(alignmentPlugin); ``` 4. You can now perform alignment operations using a range of methods, including app.alignTop, app.alignRight, app.alignBottom, app.alignLeft, app.alignCenterX, app.alignCenterY, and more. 5. Additionally, use app.distributeX and app.distributeY methods to achieve horizontal and vertical distribution. ## 🌟 Why Choose Pictode? - Powerful drawing tools to meet all creative needs. - A flexible plugin system for expanding functionality as needed. - User-friendly undo and redo functionality to fearlessly correct mistakes. - Rich import and export options for easy sharing and collaboration. Start using **Pictode** to unleash your creativity! 🚀 ## 🚀 Getting Started You can launch **Pictode** and start creating in just a few simple steps: 1. Clone this repository to your local machine. 2. Install the required dependencies: pnpm bootstrap. 3. Run the project: pnpm pictode. 4. Open your browser and visit http://localhost:8800. Now you can dive into **Pictode**, let your creativity flow, and create unique masterpieces! 🚀 ## 🙌 Contribute **Pictode** is an open-source project, and we welcome contributions in all forms. If you have suggestions, questions, or want to contribute code, don't hesitate to join our community! Thanks to the following developers for their contributions to this project: <a href="https://github.com/JessYan0913/pictode/graphs/contributors"> <img src="https://contrib.rocks/image?repo=JessYan0913/pictode" /> </a> ## 📝 License **Pictode** is released under the MIT License. Check out the LICENSE for more information. Thank you for choosing **Pictode**, and we hope it becomes your ultimate tool for creative expression! 🎉 [Visit Online](https://pictode.com) If you have any questions, feel free to contact us at：[email protected] 📧 --- 🌟 Let **Pictode** be your canvas for creative expression, where art can freely flourish! 🌟 ", Assign "at most 3 tags" to the expected json: {"id":"3913","tags":[]} "only from the tags list I provide: [{"id":77,"name":"3d"},{"id":89,"name":"agent"},{"id":17,"name":"ai"},{"id":54,"name":"algorithm"},{"id":24,"name":"api"},{"id":44,"name":"authentication"},{"id":3,"name":"aws"},{"id":27,"name":"backend"},{"id":60,"name":"benchmark"},{"id":72,"name":"best-practices"},{"id":39,"name":"bitcoin"},{"id":37,"name":"blockchain"},{"id":1,"name":"blog"},{"id":45,"name":"bundler"},{"id":58,"name":"cache"},{"id":21,"name":"chat"},{"id":49,"name":"cicd"},{"id":4,"name":"cli"},{"id":64,"name":"cloud-native"},{"id":48,"name":"cms"},{"id":61,"name":"compiler"},{"id":68,"name":"containerization"},{"id":92,"name":"crm"},{"id":34,"name":"data"},{"id":47,"name":"database"},{"id":8,"name":"declarative-gui "},{"id":9,"name":"deploy-tool"},{"id":53,"name":"desktop-app"},{"id":6,"name":"dev-exp-lib"},{"id":59,"name":"dev-tool"},{"id":13,"name":"ecommerce"},{"id":26,"name":"editor"},{"id":66,"name":"emulator"},{"id":62,"name":"filesystem"},{"id":80,"name":"finance"},{"id":15,"name":"firmware"},{"id":73,"name":"for-fun"},{"id":2,"name":"framework"},{"id":11,"name":"frontend"},{"id":22,"name":"game"},{"id":81,"name":"game-engine "},{"id":23,"name":"graphql"},{"id":84,"name":"gui"},{"id":91,"name":"http"},{"id":5,"name":"http-client"},{"id":51,"name":"iac"},{"id":30,"name":"ide"},{"id":78,"name":"iot"},{"id":40,"name":"json"},{"id":83,"name":"julian"},{"id":38,"name":"k8s"},{"id":31,"name":"language"},{"id":10,"name":"learning-resource"},{"id":33,"name":"lib"},{"id":41,"name":"linter"},{"id":28,"name":"lms"},{"id":16,"name":"logging"},{"id":76,"name":"low-code"},{"id":90,"name":"message-queue"},{"id":42,"name":"mobile-app"},{"id":18,"name":"monitoring"},{"id":36,"name":"networking"},{"id":7,"name":"node-version"},{"id":55,"name":"nosql"},{"id":57,"name":"observability"},{"id":46,"name":"orm"},{"id":52,"name":"os"},{"id":14,"name":"parser"},{"id":74,"name":"react"},{"id":82,"name":"real-time"},{"id":56,"name":"robot"},{"id":65,"name":"runtime"},{"id":32,"name":"sdk"},{"id":71,"name":"search"},{"id":63,"name":"secrets"},{"id":25,"name":"security"},{"id":85,"name":"server"},{"id":86,"name":"serverless"},{"id":70,"name":"storage"},{"id":75,"name":"system-design"},{"id":79,"name":"terminal"},{"id":29,"name":"testing"},{"id":12,"name":"ui"},{"id":50,"name":"ux"},{"id":88,"name":"video"},{"id":20,"name":"web-app"},{"id":35,"name":"web-server"},{"id":43,"name":"webassembly"},{"id":69,"name":"workflow"},{"id":87,"name":"yaml"}]" returns me the "expected json"