我的作品 ✨ Pictode：十分钟 DIY 图形编辑器💡很轻松

1141326491(JessYan) · 2023年10月07日 · 最后由 1141326491 回复于 2023年10月08日 · 399 次阅读

本站由UCloud倾情赞助

原文阅读：https://juejin.cn/post/7286307632193142843

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

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

缘起

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

虽然我以前在工作中已经实现了一些编辑器项目，如基于 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创建画板只需要几个简单的步骤：

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

npm install @pictode/core

实例化App对象。

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

const app = new App();

提供一个 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) {
    app.mount(canvasRef.value);
  }
});
</script>

<template>
  <div class="wrapper">
    <div ref="canvasRef"></div>
  </div>
</template>

当然，在这一步，画布仍然是空白的。接下来，我们将介绍如何添加绘图工具。

绘图工具

Pictode提供了一个基本的绘图工具包，其中包括了一些基于 Konva.js 的常用图形绘制工具。使用这些工具非常简单，只需几个步骤：

安装@pictode/tools依赖包。

npm install @pictode/tools

实例化一个矩形工具。

import { RectTool } from "@pictode/tools";

new RectTool({
  config: {
    stroke: "black",
    strokeWidth: 2,
    fill: "gray",
    cornerRadius: 0,
    opacity: 1,
  },
})

使用app.setTool(..)方法切换到矩形工具。

app.setTool(
  new RectTool({
    config: {
      stroke: "black",
      strokeWidth: 2,
      fill: "gray",
      cornerRadius: 0,
      opacity: 1,
    },
  }),
);

在画布上通过鼠标开始绘制矩形。

Kapture 2023-09-26 at 22.12.08.gif

选中/变换

现在，让我们为图形编辑器添加选中、平移、旋转和缩放等功能。Pictode 提供了名为 @pictode/plugin-selector 的插件，它简化了这些操作。以下是集成插件的步骤：

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

npm install @pictode/plugin-selector

实例化 selectorPlugin 插件。

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

const selectorPlugin = new SelectorPlugin();

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

app.use(selectorPlugin);

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

Kapture 2023-09-26 at 22.24.37.gif

选择工具

插入 selectorPlugin 后，你可能会观察到一个不太符合预期的行为：在绘制矩形时，蓝色框可能会叠加在矩形上，并且在移动矩形时，鼠标可能会继续绘制矩形。

这是因为 selectorPlugin 默认开启了框选功能，所以这时的 pictode 无法判断是要进行绘制操作还是框选操作。

解决方法很简单：使用工具时禁用 selectorPlugin，取消工具选择时重新启用。通过 app.setTool(tool) 启用工具时，禁用 selectorPlugin；通过 app.setTool(null) 取消工具选择时，重新启用 selectorPlugin，提升用户体验。

我明白，这种方式可能不是每个人都喜欢的。因此，@pictode/tools 提供了专门为 Selector 预留的工具 - SelectTool，包括 onActive 和 onInactive hooks：

onActive：在通过 app.setTool() 设置工具时触发。
onInactive：当其他工具替代当前工具时触发。

使用SelectTool会很自然的通过工具切换来解决选择器和绘图工具干扰问题：

const selectTool = new SelectTool({
  hooks: {
    onActive() {
      selectorPlugin.enable();
    },
    onInactive() {
      selectorPlugin.disable();
    },
  },
});

const rectTool = new RectTool({
  config: {
    stroke: "black",
    strokeWidth: 2,
    fill: "gray",
    cornerRadius: 0,
    opacity: 1,
  },
  hooks: {
    onActive() {
      app.cancelSelect();
    },
  },
});

app.setTool(selectTool);

再配合 UI 来触发工具切换：

<div ref="canvasRef" class="canvas"></div>
<div class="tools">
  <button @user13="app.setTool(selectTool)">选择</button>
  <button @user14="app.setTool(rectTool)">矩形</button>
</div>

Kapture 2023-10-01 at 23.36.29.gif

撤销/重做

操作记录功能是一个重要的编辑器功能，Pictode 当然也支持。名为 @pictode/plugin-history 的插件，它可以为 Pictode 添加撤销和重做的能力。下面是集成 plugin-history 插件的步骤：

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

npm install @pictode/plugin-selector

实例化 historyPlugin 插件。

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

const historyPlugin = new HistoryPlugin();

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

app.use(historyPlugin);

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

<template>
  <div class="wrapper">
    <div ref="canvasRef"></div>
    <button @user19="app.undo()">撤销</button>
    <button @user20="app.redo()">重做</button>
  </div>
</template>

Kapture 2023-09-26 at 22.31.08.gif

这样，用户就可以轻松地撤销和重做他们的操作，提高了编辑器的灵活性和易用性。

对齐/分布

编辑图形时，需要确保图形之间的对齐和分布。Pictode 提供了 @pictode/plugin-alignment 插件，用于实现这些功能。使用以下步骤集成插件：

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

npm install @pictode/plugin-selector

实例化 alignmentPlugin 插件。

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

const alignmentPlugin = new AlignmentPlugin();

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

app.use(alignmentPlugin);

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

Kapture 2023-09-26 at 22.38.36.gif