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

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

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

推荐阅读