从零开发一款图片编辑器Mitu-Dooring

背景介绍

我们知道，为了提高企业研发效能和对客户需求的快速响应，现在很多企业都在着手数字化转型，不仅仅是大厂(阿里，字节，腾讯，百度)在做低代码可视化这一块，很多中小企业也在做，拥有可视化低代码相关技术背景的程序员也越来受重视。

我最近一直在做数据可视化和lowcode/nocode​相关的项目，针对我自己的工作经验和对lowcode/nocode的探索，也写了一系列低代码可视化搭建系列文章，今天我们继续来分享可视化相关的内容——可视化图片编辑器。

在分享过程中，我会以最近我写开源的一个项目Mitu为案例，仔细拆解它的实现过程。Mitu主要是辅助H5编辑器 H5-Dooring 做图像处理用的，大家也可以轻松基于它进行二次开发和扩展，变成更强大的图片编辑器。

接下来我就来带大家介绍和剖析一下这款开源图片编辑器 Mitu。

以上是图片编辑器的部分演示效果，我们可以通过拖拽重组的方式快速生成我们想要的图片，也能将图片保存为模版，以便后期复用。在项目开发之前我也设计了一个简单的原型，保证自己的开发方向不会跑偏，大家可以参考一下：

按照我一向的写作风格，我先列一下技术实现的大纲，以便大家有选择且高效率的阅读和学习：

• 可视化编辑器项目搭建和技术选型
• 图形库设计
• 属性编辑器设计
• 自定义图元控制器实现
• 预览功能实现
• 保存图片功能实现
• 模版保存实现
• 导入模版功能实现
• 可视化图片编辑器后期规划

好了，话不多说，接下来开始我们的技术实现。

技术实现

项目搭建和技术选型

编辑器的实现思路和技术栈无关，这里我采用了 React​ 来实现，当然大家如果更喜欢 Vue​ 或者 sveltejs，也是没问题的，项目整体技术选型如下：

• umi可扩展的企业级前端应用框架
• React + Typescript
• Antd前端组件库
• fabric一个可以简化Canvas 程序编写的库
• localStorage本地数据存储

当然在项目的实现过程中还有很多细节和思想，接下来我会一一和大家介绍。如果大家对 fabric 这个库不太熟悉也不用担心，我会通过具体功能的实现来带大家熟悉这个库。

在介绍下面的内容之前我们先安装一下 fabric ，然后初始化一个画布。

yarn add fabric

初始化一个画布：

import { fabric } from "fabric";
import { nanoid } from 'nanoid';
import { useEffect, useState, useRef } from 'react';

export default function IndexPage() {
    const canvasRef = useRef<any>(null);
    useEffect(() => {
        canvasRef.current = new fabric.Canvas('canvas');
        // 创建一个文本元素
        const shape = new fabric.IText(nanoid(8), {
             text: 'H5-Dooring',
             width : 60,
             height : 60,
             fill : '#06c',
             left: 30,
             top: 30
         })
        // 将文本元素插入画布
        canvasRef.current.add(shape);
        //