大家好,我是前端西瓜哥。
有人问我要怎么解析在 Figma 编辑器中复制的图形数据。
我以前其实有想过解析复制的数据,只是没太大动机,后面也忘了。既然有人问,那我就顺手解析一下吧。
我发现数据格式果然也是 kiwi,和解析 fig 文件差不多,所以很简单就转换出了 JSON 数据。
我们来解读一下这些字段的含义 ,揭秘 Figma 都复制了什么东西出来。
首先是 figmeta 对应的一段很短的 base64,这个直接调用 atob 方法转成 ASCII 编码就拿到了 JSON 字符串。
{
"fileKey":"kf9BxqmUAS10JEJZ7Rne3R",
"pasteID":1624241693,
"dataType":"scene"
}
字段:
这段简单的数据单独放出来,没太理解为什么。
猜测大概可以基于它们判断是否在当前图纸复制,直接使用内存中保存的另一份一样的数据,这样就不用做完整的反序列化了。
再看看 figma 字段对应的 base64 解析后的结果。
选区信息。比如选中的图形有哪些。
"clipboardSelectionRegions": [
{
// 被选中图形的父节点,通常是个 Canvas
"parent": {
"sessionID": 0,
"localID": 1
},
// 被选中图形 id
"nodes": [
{
"sessionID": 4,
"localID": 4
},
{
"sessionID": 2,
"localID": 2
}
],
// 图形是否有部分在 frame 外边
"pasteIsPartiallyOutsideEnclosingFrame": false
}
],
被复制的图形数组,注意这里处了有被选中的图形,还有和选中图形有关联的图形,比如 frame 图形被选中,其子图形也要带上。
具体各种图形的属性,之前我已经有不少解读,这里不说了,具体看我的相关文章。
一些 nodeChanges 数组里一些图形,比如矢量网格、文字会将一些复杂的数据放在这里。放这里的原因是做懒解析,要用到再取。
是否是剪切(Ctrl + X 或 Command)产生的数据。
从哪种类型的编辑器中复制出来的。目前有 5 种:
"EditorType": {
"DESIGN": 0, // Figma
"WHITEBOARD": 1, // FigJam
"SLIDES": 2, // 幻灯片
"DEV_HANDOFF": 3,
"SITES": 4
}
我发现复制数据里是不会带上图片本体的数据的,只会给一个图片哈希值。
这是什么情况,这样的话图片理论应该粘贴不出来才对啊,但我操作了下确实能把图片复制出来。
一开始我以为数据没解析好,哪里漏了图片的信息,后面我做了一些测试后才恍然大悟。
你说的对,但是 Figma 是一款自主研发的只能联网使用的图形编辑器,它没有离线版,数据保存到云端,其中就包括了图片。
所以,只要有了图片哈希值这个唯一标识,就能找到服务器上的对应图片,接着只要拉取下来就好了。
当然,除了图片,其它资源也都能这样做。
这样做的好处可以有效减小复制数据的大小。
复制数据的信息量并不多。