Pictode 🎨

欢迎来到 Pictode - 你的创意自由发挥的画板！🚀

立即体验

简体中文 | English

Pictode 是一个基于 Vue 3、TypeScript、Konva、HeadlessUI 和 Tailwind CSS 等酷炫技术构建的画板项目，它让你可以随心所欲地绘制、创作和表达自己的创意。✨

本地运行

• 克隆仓库到本地

git clone https://github.com/JessYan0913/pictode.git

• 安装依赖项

cd pictode

npm i -g pnpm

pnpm bootstrap

• 启动项目

pnpm pictode

• 访问项目http://localhost:8800

🖌️ 绘图工具

Pictode 提供了一系列的绘制工具，从简单的矩形到复杂的连线，你可以尽情选择并创造属于你自己的艺术作品。🎨

• 使用 ✏️ 铅笔工具，释放你的涂鸦天赋。
• 用 📷 图片工具，插入照片，为你的画板增添多彩元素。
• 借助 🖋️ 文本工具，写下你的思绪和创意。
• 创造完美的几何图形，如 🟩 矩形、🔶 菱形 和 🟤 椭圆。

🪄 导入与导出

将你的艺术作品与世界分享！Pictode 支持各种导入和导出选项，包括 JPG、PNG 和 JSON 格式。📤📥

• 导出你的项目，分享给朋友或同事。
• 导入其他人的项目，获得灵感并进行编辑。

✨ 插件增强功能

Pictode 还支持各种插件，以满足不同的需求。

🕒 操作记录

1. 安装 @pictode/plugin-history 依赖包。

npm install @pictode/plugin-selector

1. 实例化 historyPlugin 插件。

import { HistoryPlugin } from '@pictode/plugin-history';

const historyPlugin = new HistoryPlugin();

1. 使用 app.use(historyPlugin) 方法加载插件。

app.use(historyPlugin);

1. 之后，你可以通过 app.undo() 和 app.redo() 方法来实现撤销和重做的功能。

✅ 选择器

1. 安装 @pictode/plugin-selector 依赖包。

npm install @pictode/plugin-selector

1. 实例化 selectorPlugin 插件。

import { SelectorPlugin } from '@pictode/plugin-selector';

const selectorPlugin = new SelectorPlugin();

1. 使用 app.use(selectorPlugin) 方法加载插件。

app.use(selectorPlugin);

1. 通过 鼠标点击 或 app.select(...) 和 app.cancelSelect(...) 方法来实现选中和取消选中图形的操作。同时，按下 Shift 键可以实现多选和取消选择的功能。

🔄 对齐工具

1. 安装 @pictode/plugin-alignment 依赖包。

npm install @pictode/plugin-selector

1. 实例化 alignmentPlugin 插件。

import { AlignmentPlugin } from '@pictode/plugin-alignment';

const alignmentPlugin = new AlignmentPlugin();

1. 使用 app.use(alignmentPlugin) 方法加载插件。

app.use(alignmentPlugin);

1. 之后，你可以使用一系列方法来实现对齐操作，包括 app.alignTop、app.alignRight、app.alignBottom、app.alignLeft、app.alignCenterX、app.alignCenterY 等。
2. 此外，你还可以使用 app.distributeX 和 app.distributeY 方法来实现水平均分和垂直均分功能。

🌟 为什么选择 Pictode？

• 强大的绘制工具，满足所有创意需求。
• 灵活的插件系统，根据需求扩展功能。
• 友好的撤销和重做功能，无惧错误。
• 丰富的导入导出选项，方便分享和合作。

开始使用Pictode，释放你的创意吧！🚀

🚀 快速开始

你只需几个简单的步骤，就能启动Pictode并开始创作：

1. 克隆这个仓库到你的本地机器。
2. 安装所需的依赖：pnpm bootstrap。
3. 运行项目：pnpm pictode。
4. 打开浏览器，访问 http://localhost:8800。

现在，你可以开始使用Pictode，尽情发挥创意，创造出独一无二的作品！🚀

🙌 贡献

Pictode 是一个开源项目，我们欢迎各种形式的贡献。如果你有任何建议、问题或想要贡献代码，不要犹豫，立即加入我们的社区！

感谢以下开发者对该项目做出的贡献：

QQ 群：

📝 许可

Pictode 是根据 MIT 许可证发布的。查看 LICENSE 以获取更多信息。

感谢你选择Pictode，希望它能成为你创意表达的最佳工具！🎉

在线访问

如果有任何问题，请随时联系我们：1141326491@qq.com 📧

---

🌟 让Pictode 成为你创意的画布，让艺术在这里自由绽放！ 🌟