今天和大家分享一款国内大佬开发的图片编辑器 fast-image-editor。文章将从如何使用到技术分析, 详细和大家介绍一下这款可视化工具的实现, 我相信大家可以从这篇文章的实现方案中受益匪浅。如果你觉得这个项目对你有帮助, 也可以在 github 上点个 star, 支持一下作者。(文末会附上github地址)
我们可以按照以下方式来获取并启动项目:
目前已支持的功能有:
layout布局
文字编辑组件
图片编辑组件
画布放大缩小
画布右键菜单
图片下载
背景图支持
画布参考线
模版库
导出图片json
项目采用 React umi 开发框架，采用 typescript 编写，图片编辑功能用的是 react-konva,考虑后期可能核心的编辑功能整体做成一个组件，所以没有 umi 里提供的 useModel 去做状态处理，采用的是flooks。技术栈如下:
大部分工具类的软件都有辅助线，方便拖拽元素的时候对齐，能让我们快速的做出漂亮的图片。辅助线实现过程稍微有些复杂，我们一步步说下实现过程。
左侧辅助线出现时机:
我们以节点2为移动的元素，通过上面的图观察我们可以看出，当左侧辅助线出现的时候，节点1的x坐标和节点2的x坐标相等的时候辅助线就会出现，我们移动节点2的时候动态去判断。
右侧辅助线出现时机:
我们以节点2为移动的元素，通过上面的图观察我们可以看出，当右侧辅助线出现的时候，节点1的x+width(坐标x+节点的宽度)和节点2的x坐标相等的时候辅助线就会出现，我们移动节点2的时候动态去判断。
辅助线规则
左侧辅助线 x1(x) = x2(x)
右侧辅助线 x1(x+width) = x2(x)
水平中间辅助线 x1(x+width/2) = x2(x+ width / 2)
顶部辅助线 x1(y) = x2(y)
底部辅助线 x1(y+height) = x(y)
垂直中间辅助线 x1(y+height/2) = x2(+height/2)
上面的公式我们以节点2为拖动的元素，节点1为目标元素。当我们以节点1为拖动元素，节点2为目标元素，公式会有变化，大家可以自行尝试一下。
代码实现
上面我们分析出了一个节点的对比规则，画布上可能会有很多节点，让当前移动的节点去和剩下的元素去做比较。然后通过 Knova 的 layer 下的 children 获取所有元素，并记录位置，代码如下:
在拖动节点的时候，调用detectionToLine方法根据计算规则画线:
达到阈值，添加辅助线
我们可以看到在对比的时候有这样的代码:
这块主要是用来判断两个节点之间的距离小于设定的阈值，触发添加辅助线。
还有一段设置当前节点位置的代码，如下:
这块的主要作用是辅助线出现的是，节点移动的位置不超过阈值，节点不会动。
添加辅助线
添加辅助线会传入拖动的元素和目标元素，以及哪个方向要出现辅助线。
根据拖动的元素和目标元素以及方向计算出辅助线出现的位置:
添加辅助线方法，比较简单:
好啦, 今天的内容就到这里了, 如果觉得文章对你有帮助, 记得点赞 + 再看, 让更多的朋友从中受益~
github:
https://github.com/jiechud/fast-image-editor
作者: 杰出D
