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