【解放生产力】手把手教你写一个批量切图sketch插件

一般用sketch切图需要几个步骤呢？1.按下S键切换到切图工具，2.拖动划出一个切片区域，3.将需要切图的图层和切片合为一个组，4.调整切片位置使图层居中，5.选择切片，选择“export group content only”，设定导出图片倍数及类型，6.导出
而这只是导出其中一张图，若要切大量图片就会十分麻烦。
因此我做了现在这个批量切图的sketch插件。
https://github.com/luyiying/sliceMaster
插件要怎么使用呢？
1.选择需要切图的图层

2.使用插件

3.输入需要批量导出切片的尺寸以及倍数

4.导出

如此一来要切这种相同规格的大量icon就十分方便了。
那么这个插件要怎么写呢。如今sketch插件的api文档十分不齐全，若指望只看官方文档来写出一个插件是比较艰难的，而我们可以借助众人的智慧，在这里http://sketchplugins.com/ 可以搜索到很多功能写法的经验，再加上一些API的名称便能猜测出具体是干什么的。
下面来分析下这个插件的核心代码，更主要是讲下一些功能的写法。而写sketch插件的一些基础知识可以看我之前写的这篇文章。

//对话框设置参数
var setPanel = function(){}
setPanel.prototype= {
    run: function(){
        ...
    },
    setConPanel: function(){
        ...
    },
    setSavePanel: function(){
                ...
    }
}
var onRun = function(context){
    ctx = context;
    doc = context.document;
    page = doc.currentPage();
    command = context.command;

    new setPanel().run();
}

collectLayers: function(config,path){
        var exportPath = path;

        var theLayer;
        //所选的图层合集
        var loopLayer = this.allLayers.objectEnumerator();

        log(loopLayer);
        //遍历图层
        while(theLayer = loopLayer.nextObject()){
            //切片导出路径
            var layerSlicePath = exportPath,
                layerSliceName = util.toJSString(theLayer.name());
                log('layerSliceName:'+layerSliceName);
            if(config.format == 0){
                var format = 'png';
            }else{
                var format = 'jpg';
            }
            this.handleSlice(theLayer,{
                name: layerSliceName,
                path: layerSlicePath,
                format: format,
                scale1x: config.scale1x,
                scale2x: config.scale2x,
                scale3x: config.scale3x,
                width: config.width,
                height: config.height
            });
        }
    }

handleSlice: function(layer,options){
        //Looks like MSLayerArray is a wrapper to NSArray with some convenience functions for layer management. 
        //The underlying data is in _layers which has an accessor method layers
        //（这是看到前人的经验，不酱紫写没法新建一个包含该图层的group）
        var layers = MSLayerArray.arrayWithLayer(layer);

        //新建一个包含图层的group，用于包含图层和切片
        var group = MSLayerGroup.groupFromLayers(layers);
            group.setName(options.name);

        //给图层新建一个切片，因为已经有group了，所以直接被包含在group里
        var slice = MSSliceLayer.sliceLayerFromLayer(layer),
            //获取切片、图层的位置宽高等信息
            sliceFrame = slice.frame(),
            layerFrame = layer.frame();

        var ancestry = null,
            exportRequest = null;
        
        
        //初始化导出路径名称
        var exportName = options.path +'/'+ options.name,
            exportSlicePath = "";
        log('exportName:'+exportName);

        //切片设置为输入的宽高
        sliceFrame.setWidth(options.width);
        sliceFrame.setHeight(options.height);

        //计算切片与图层的位置差
        var sliceX = (layerFrame.width() - sliceFrame.width()) / 2;
        var sliceY = (layerFrame.height() - sliceFrame.height()) / 2;
        var sliceXFloor = Math.floor(sliceX);
        var sliceYFloor = Math.floor(sliceY);

        //按照位置差移动切片位置，使图层居中于切片中心
        sliceFrame.setX(sliceXFloor);
        sliceFrame.setY(sliceYFloor);
        log('sliceX'+sliceX+';sliceY'+sliceY);

        //使导出切片去除背景，export group contents only
        slice.exportOptions().setLayerOptions(2);
        ctx.document.reloadInspector();
        log('group:'+group);
        // resize group
        group.layerDidEndResize();

        log('slice:'+slice);

        //新建一个导出请求，以便可以设置导出倍数等等
        ancestry = [MSImmutableLayerAncestry ancestryWithMSLayer:slice];
        exportRequest = MSExportRequest.exportRequestsFromLayerAncestry_(ancestry).firstObject();
        exportRequest.format = options.format;
          
          // 1x
        if(options.scale1x){
            //设置导出倍数
            exportRequest.scale = "1";
            //导出路径
            exportSlicePath = exportName+'.'+options.format;
            //导出切片
            doc.saveArtboardOrSlice_toFile(exportRequest, exportSlicePath);
        }
          // 2x
        if(options.scale2x){
            exportRequest.scale = "2";
            exportSlicePath = exportName+'@2x.'+options.format;
            doc.saveArtboardOrSlice_toFile(exportRequest, exportSlicePath);
        }
          // 3x
        if(options.scale3x){
            exportRequest.scale = "3";
            exportSlicePath = exportName+'@3x.'+options.format;
            doc.saveArtboardOrSlice_toFile(exportRequest, exportSlicePath);
        }
        
    }