Sketch 模块同步插件

通过该插件可以将sketch中的画板转换为data然后上传至服务器,并能通过插件将服务器的data下载至本地还原为之前的画板。

预览

博客传送

ps. 由于此项目需要配合服务器接口,虽然将此出也开源,但是意味着插件无法直接使用。。所以木有插件下载地址。。 如果只是想看看这个功能,看预览GIF就好,如果想自己试一下,最好具备skpmNode-js的运行环境和能力。

核心功能

功能的实现都是通过Sketch.app的API实现

其核心功能就俩:

  • 将画板编码
  • 解码为画板

核心代码

由于功能并不复杂,但是sketch并没有完整的API文档,所以只能摸索着来,最后总结一下用到的API,只有下面的几个重要函数。

但是要找到这些API并不是随手一个Google可以得到,现将其列出,方便你能随手Google一下就得到:)

另外,下面几部分的代码都通过CocoaScript的语法,所以可以直接应用到插件中。

为了能更好的理解和使用相关API,我尽量详细。

将画板编码

本节会将所有已经选中的层所对应的画板转换为json字符串。

ps.

  • 包含sketch能够呈现的所有组件,包括但不限于:文本、矩形、图片、画板。
  • 如果选中的层没有画板,将会被忽略。
var selection = context.selection,
    artboards = [];

for (var i = 0; i < selection.count(); i++) {
    try {
        // 取出选中的所有画板
        var artboard = selection[i].parentArtboard();
        if (artboards.indexOf(artboard) == -1) {
            // 过滤重复的画板
            artboards.push(artboard);
        }
    } catch (error) {}
}

if (artboards.length == 0) {
    // 并无选中的任何画板
    return;
}

// 此时 artboards 数组, 即为当前选中的所有画板

var selectionStrings = [];
artboards.forEach(artboard => {
    try {
        // 将画板转为JSON字符串,并保存在 selectionStrings 数组中
        selectionStrings.push(MSJSONDataArchiver.archiveStringWithRootObject_error_(artboard.immutableModelObject(), nil));
    } catch (error) {}
});

// 将selectionStrings数组转为数组JSON字符串
var selectionsString = '[' + selectionStrings.join(',') + ']';

// 此时selectionsString字符串即为当前选中的所有画板的json数组字符串形式。 

解码为画板

接上一节的selectionsString

先将selectionsString转为page的json数据,然后解析为一个新的page,并居中展示。

var selectionsString = res.layers,
    pageUUID = NSUUID.UUID().UUIDString(),
    // 用page的JSON包裹selectionsString,同时生成一个新的UUID
    pageString = '{"_class":"page","do_objectID":"' + pageUUID + '","layers":' + selectionsString + '}',
    data = NSString.alloc().initWithString(pageString).dataUsingEncoding_(4),
    // 将JSON解码
    unarchive = MSJSONDataUnarchiver.unarchiveObjectWithData(data),
    // 生成新的page
    newPage = MSPage.alloc().initWithImmutableModelObject(unarchive),
    // 插入一个新的page
    page = MSDocument.currentDocument().addBlankPage();
// 将生成的page所有的layers转移到新的page里面
page.addLayers(newPage.layers());
// 为page设置哥名字
page.setName(res.project);
// page剧中
MSDocument.currentDocument().contentDrawView().centerLayersInCanvas();
MSDocument.currentDocument().pageTreeLayoutDidChange();

其他代码

关于别的后端操作啊 什么的我认为并不是核心代码。那代码谁都会写。。毕竟我写这个的时候只有2周的摸索经验😂,还是不聊这个了。

  • sync-npm 插件相关的目录,采用skpm构建
  • sync-server 插件对应的服务端代码,采用Node-js构建

目前还存在的问题

  • 如果是带图片的画板,并且较多的时候,selectionsString会很大,传输速度有点慢。。
  • UI交互有点吃藕。。最好开发一套macOS的UI,但是我还是只菜鸡。。
  • 项目的代码我只是简简单单的连学带写2周做出来的。。写的不是一般的渣,见谅。。

你可能需要的参考资料