一般用sketch切圖需要幾個(gè)步驟呢？1.按下S鍵切換到切圖工具，2.拖動(dòng)劃出一個(gè)切片區(qū)域，3.將需要切圖的圖層和切片合為一個(gè)組，4.調(diào)整切片位置使圖層居中，5.選擇切片，選擇“export group content only”，設(shè)定導(dǎo)出圖片倍數(shù)及類型，6.導(dǎo)出
而這只是導(dǎo)出其中一張圖，若要切大量圖片就會(huì)十分麻煩。
因此我做了現(xiàn)在這個(gè)批量切圖的sketch插件。
https://github.com/luyiying/sliceMaster
插件要怎么使用呢？
1.選擇需要切圖的圖層

如此一來(lái)要切這種相同規(guī)格的大量icon就十分方便了。
那么這個(gè)插件要怎么寫呢。如今sketch插件的api文檔十分不齊全，若指望只看官方文檔來(lái)寫出一個(gè)插件是比較艱難的，而我們可以借助眾人的智慧，在這里http://sketchplugins.com/ 可以搜索到很多功能寫法的經(jīng)驗(yàn)，再加上一些API的名稱便能猜測(cè)出具體是干什么的。
下面來(lái)分析下這個(gè)插件的核心代碼，更主要是講下一些功能的寫法。而寫sketch插件的一些基礎(chǔ)知識(shí)可以看我之前寫的這篇文章。

//對(duì)話框設(shè)置參數(shù)
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()){
            //切片導(dǎo)出路徑
            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
        //（這是看到前人的經(jīng)驗(yàn)，不醬紫寫沒(méi)法新建一個(gè)包含該圖層的group）
        var layers = MSLayerArray.arrayWithLayer(layer);

        //新建一個(gè)包含圖層的group，用于包含圖層和切片
        var group = MSLayerGroup.groupFromLayers(layers);
            group.setName(options.name);

        //給圖層新建一個(gè)切片，因?yàn)橐呀?jīng)有g(shù)roup了，所以直接被包含在group里
        var slice = MSSliceLayer.sliceLayerFromLayer(layer),
            //獲取切片、圖層的位置寬高等信息
            sliceFrame = slice.frame(),
            layerFrame = layer.frame();

        var ancestry = null,
            exportRequest = null;
        
        
        //初始化導(dǎo)出路徑名稱
        var exportName = options.path +'/'+ options.name,
            exportSlicePath = "";
        log('exportName:'+exportName);

        //切片設(shè)置為輸入的寬高
        sliceFrame.setWidth(options.width);
        sliceFrame.setHeight(options.height);

        //計(jì)算切片與圖層的位置差
        var sliceX = (layerFrame.width() - sliceFrame.width()) / 2;
        var sliceY = (layerFrame.height() - sliceFrame.height()) / 2;
        var sliceXFloor = Math.floor(sliceX);
        var sliceYFloor = Math.floor(sliceY);

        //按照位置差移動(dòng)切片位置，使圖層居中于切片中心
        sliceFrame.setX(sliceXFloor);
        sliceFrame.setY(sliceYFloor);
        log('sliceX'+sliceX+';sliceY'+sliceY);

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

        log('slice:'+slice);

        //新建一個(gè)導(dǎo)出請(qǐng)求，以便可以設(shè)置導(dǎo)出倍數(shù)等等
        ancestry = [MSImmutableLayerAncestry ancestryWithMSLayer:slice];
        exportRequest = MSExportRequest.exportRequestsFromLayerAncestry_(ancestry).firstObject();
        exportRequest.format = options.format;
          
          // 1x
        if(options.scale1x){
            //設(shè)置導(dǎo)出倍數(shù)
            exportRequest.scale = "1";
            //導(dǎo)出路徑
            exportSlicePath = exportName+'.'+options.format;
            //導(dǎo)出切片
            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);
        }
        
    }