前端图片编辑功能的实践小结

图二

图三

▐  核心效果：花字

花字的难点在于实现一套协议多端渲染，所以需要充分考虑移动端、PC 端的渲染差异。其次需要考虑如何快速拓展新效果。

▐  难点一：点 9 图

什么是点 9 图？为什么难？

点 9 图是一种特殊的图片样式，可以确保图片拉伸时，所设定的关键部分不变形 移动端系统支持点 9 图渲染，但 PC 端需要实现一套点 9 图渲染引擎

普通图片经由原图拉伸之后，会产生缺角部分的形变。但我们希望的是，边角部分始终不变，这样才符合视觉的需求。所以在这张点 9 图中，两个缺角，其实就是整张图的关键部分。大多数的点 9 图，其实也就是对边角有一些特殊要求。我们通常可以通过 4 个方向的 Padding，来将这些关键部分划分出来。

• 点9图实现：三个步骤（对应三个 Canvas）

步骤一：裁剪区块 （SourceCanvas 对源图片进行裁剪）

步骤二：区块拉伸 （ScaleCanvas 对某一个区块进行拉伸、平铺）

步骤三：区块拼接 （TargetCanvas 将处理好的区块拼接起来，导出目标尺寸的新图片）

• 拉伸区块的变形问题

对于一些素材，在上图的 2、4、5…用于拉伸的区块上可能也存在一些图案，所以我们给定一个宽高比，在宽高比之内，做拉伸，到达宽高比之后，将两张原图拼接，并重新拉伸到相应的大小，之后不停的拼接。这种处理方式，可以同时解决相框特效，因为本质上，相框其实就是区块 5 为透明的点 9 图

▐  难点二：定位与线性布局

定位的协议，我们先设定了上、下、左、右、中 5 个方向的二进制值，最后通过位运算得出细分的 9 个点，实现一个9宫格式的定位。而对于线性布局，它原本也是移动端的概念，我们在 PC 端上实现了横纵两种配置。

/定位协议/

上：00001 (二进制)

左：00010

下：00100

右：01000

中：10000

// 设置好上述五个方向的值之后，对每个方向互相做或运算。

如：

00001

| 00010

---

00011

上左 = 上|左 = 00001 | 00010 = 00011 (十进制：3)

上中 = 上|中 = 00001 | 10000 = 10001 (十进制：17)

上右 = 上|右 = 00001 | 01000 = 01001 (十进制：9)

左中 = 左|中 = 00010 | 10000 = 10010 (十进制：18)

中 = 10000 (十进制：16)

右中 = 右|中 = 01000 | 10000 = 11000 (十进制：24)

下左 = 下|左 = 00100 | 00010 = 00110 (十进制：6)

下中 = 下|中 = 00100 | 10000 = 10100 (十进制：20)

下右 = 下|右 = 00100 | 01000 = 01100 (十进制：12)

• 怎么实现？

• 初始化时，以各个图片的配置计算其位置。

• 将花字的各个元素合并成一个整体 Group

• 所有元素以 Group 左上角为原点对齐，初始化时没有任何偏移

• 计算出整个 Group 的最大宽高，以该尺寸作为一个初始状态 OriginSize

• 依照上述初始状态，对每一个元素做初始化的偏移。如定位值为 17，那么他的left应该为(OriginSize.width - Self.width) / 2

• 初始化后，之后的计算基本与定位值无关，我们记录初始化后的各个子元素与文本之间的距离，并把它们保存起来，文本 Change 时，对每一个子元素重新设定位置，即可

（上图中可以看到 “VLOG MY LIFE” 、 “HAVE A NICE DAY” 这两个黄色文字，其实是以图片形式展现的，他们的定位值分别为 17、20 ）

多花字的线性布局中，初始化时、所有元素的垂直、水平偏移都需要累加上之前所有元素的宽高和；文本编辑时，将以初始化的位置为基础，依照文本框宽高的变化，对各个元素的位置进行动态计算。

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）

结尾

学习html5、css、javascript这些基础知识，学习的渠道很多，就不多说了，例如，一些其他的优秀博客。但是本人觉得看书也很必要，可以节省很多时间，常见的javascript的书，例如：javascript的高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。

资料领取方式：戳这里免费获取

的优秀博客。但是本人觉得看书也很必要，可以节省很多时间，常见的javascript的书，例如：javascript的高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。

资料领取方式：戳这里免费获取