1.8 PSD文件中元素定位的问题

最近在处理上传 PSD 文件至平台的问题，需要把 psd 里的元素，挨个映射到在线的设计中去。

读取PSD数据都比较简单，有现成的工具像 psd.js psd-tools 之类的开源项目，结合 Adobe 官方的文档说明，基本上没太大问题；但是实现对应功能以及后续的渲染都相对来说比较的麻烦，开源项目解决了一小部分的渲染功能，但是像调整图层、图层样式只能靠自己来处理。

不过，需要考虑的细节点出乎意料的多。

PS里面定位主要是靠左上角的顶点，对于图片、形状来说非常直观。

但是文字框的定位一直有问题，后来发现原因在于文字框左上顶点的坐标并不是和字号&行高的直接相关的 —— 这个顶点的位置其实是文字在四周切边之后的框体位置，并非简单一倍行高时左上角的位置。举个例子，a 和 A 的切边位置就是不一样的。

这个切边后的坐标点位置我们其实是可以进行计算的，只需要结合字体中读取的信息数据来统筹计算，但是由于目前平台对于字体数据的处理缺乏积累，暂时不作那么精细的考虑，可以直接按一倍行高时的位置进行换算。

对于使用 CSS 的平台来说，在行高大于字号时，由于 css 对行高的实现规则，我们还需要减去 CSS 顶部的 half-leading 的数值。

此外文字框由于更换字体导致的换行问题也很多，解决方案相对来说还算容易，系出同源。

PS：当然通过 layer 的顶点位置来做文字框定位是存在很大的问题的，在有旋转或者 skew 操作时更甚；有更精确的方法来处理文字框，但是相对来说要处理的细节也会更多，在此不赘述了。