图片编辑器免费版（自媒体必备的开源图片编辑器）

　　今天和大家分享一款国内大佬开发的图片编辑器 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