✨ Pictode：十分钟轻松DIY图形编辑器

利用两个多月的业余时间，使用Konva.js实现了一个名为【Pictode】的图形编辑器

- 体验地址: https://jessyan0913.github.io/pictode-playground/#/

• 🎨Pictode 欢迎体验🎨：https://pictode.com/#/
• ✨GitHub 欢迎Star✨：https://github.com/JessYan0913/pictode

缘起

在掘金上看到众多技术大咖打造自己的图形编辑器项目。通过阅读大咖们的文章让我深受启发，我既敬佩这些大咖坚持创作和分享的精神，也自豪于自己也有编辑器项目的经验。这些因素汇聚，催生了我开发一个自己的图形编辑器的想法。

虽然我以前在工作中已经实现了一些编辑器项目，如基于Three.js的3D编辑器、基于bpmn.js的流程编辑器、基于X6的拓扑编辑器，还有基于Vue的低代码编辑器等，但受公司项目限制，这些编辑器无法达到我理想中的水平。

今年8月份，我利用业余实践开始了名为Pictode的图形编辑器项目。到目前为止，Pictode集成了众多实用功能，如工具切换、属性编辑、右键菜单、本地保存、导出图片、画布缩放、画布拖拽、历史记录、语言切换、主题切换等。经过这段时间努力，我认为Pictode已初步具备雏形，因此我决定向大家介绍它。

Pictode主要功能演示

图形绘制

选择/变换

层级移动

对齐/分布

组合/解除组合

导出图片

温馨提示🔔：看图固然好，实际体验方知妙处！吾友，诚挚邀请前往pictode一试身手，领略其中奥妙！ 🎨✨

Pictode能为你带来什么

也许你已经在掘金上看到许多技术大咖分享如何实现画板或图片编辑器的方法。他们或许详细解释了编辑器的原理和代码实现，有些甚至直接使用原生Canvas构建编辑器。但你是否和我有相同的感受？

我们既敬佩技术大咖，又感到自己阅读后除了感叹：“🐮🍺！”外收获很少。原因在于我们无法将他们的代码应用到项目中。虽然阅读、点赞和收藏了这些文章，但仍感头脑空空，实际收获有限。

把图形编辑器嵌入自己的项目，有时真麻烦。比如，编辑器用React构建，你的项目用Vue；或者编辑器不够灵活。Pictode就是你的救星，像🚀一样，解决这些问题，让你事半功倍。

故吾决心，以Pictode引领特异之经验。Pictode独立于UI框架，展示不朽之图形编辑构建。其API举重若轻，依托威能之Konva.js库。故不论尔用React，或Vue，亦或他框架，以Pictode，成本可微，缔造专有图形编辑器，无往不利。

DIY画板

现在，让我们一起亲身体验Pictode，并快速创建一个图形编辑器。

放心食用：DIY画板源码

创建画板

使用Pictode创建画板只需要几个简单的步骤：

1. 安装@pictode/core依赖包。该核心包负责管理舞台、图层、工具、插件，以及处理鼠标事件分发等功能。

npm install @pictode/core

2. 实例化App对象。

import {
    App } from "@pictode/core";

const app = new App();

3. 提供一个DIV容器，使用app.mount(..)方法挂在画布。

<script setup lang="ts">
import {
      ref, onMounted } from "vue";
import {
      App } from "@pictode/core";

const canvasRef = ref<HTMLDivElement>();

const app = new App();

onMounted(() => {
     
  if (canvasRef.value<