Welcome to Pictode - your canvas for unlimited creativity! 🚀
简体中文 | 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. ✨
- Clone the repository locally
git clone https://github.com/JessYan0913/pictode.git
- Install dependencies
cd pictode
npm i -g pnpm
pnpm bootstrap
- 启动项目
pnpm pictode
- 访问项目
https://localhost:8800
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.
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.
Pictode offers various plugins to cater to diverse needs.
- Install the
@pictode/plugin-history
dependency.
npm install @pictode/plugin-selector
- Instantiate the historyPlugin plugin.
import { HistoryPlugin } from '@pictode/plugin-history';
const historyPlugin = new HistoryPlugin();
- Use the app.use(historyPlugin) method to load the plugin.
app.use(historyPlugin);
- You can now implement undo and redo functionality with the app.undo() and app.redo() methods.
- Install the @pictode/plugin-selector dependency.
npm install @pictode/plugin-selector
- Instantiate the selectorPlugin plugin.
import { SelectorPlugin } from '@pictode/plugin-selector';
const selectorPlugin = new SelectorPlugin();
- Use the app.use(selectorPlugin) method to load the plugin.
app.use(selectorPlugin);
- 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.
- Install the @pictode/plugin-alignment dependency.
npm install @pictode/plugin-selector
- Instantiate the alignmentPlugin plugin.
import { AlignmentPlugin } from '@pictode/plugin-alignment';
const alignmentPlugin = new AlignmentPlugin();
- Use the app.use(alignmentPlugin) method to load the plugin.
app.use(alignmentPlugin);
-
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.
-
Additionally, use app.distributeX and app.distributeY methods to achieve horizontal and vertical distribution.
- 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! 🚀
You can launch Pictode and start creating in just a few simple steps:
- Clone this repository to your local machine.
- Install the required dependencies: pnpm bootstrap.
- Run the project: pnpm pictode.
- Open your browser and visit https://localhost:8800.
Now you can dive into Pictode, let your creativity flow, and create unique masterpieces! 🚀
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:
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! 🎉
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! 🌟