【解放生产力】手把手教你写一个批量切图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);
        }
        
    }
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,544评论 6 501
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,430评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 162,764评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,193评论 1 292
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,216评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,182评论 1 299
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,063评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,917评论 0 274
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,329评论 1 310
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,543评论 2 332
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,722评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,425评论 5 343
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,019评论 3 326
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,671评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,825评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,729评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,614评论 2 353

推荐阅读更多精彩内容

  • 扩展Sketch 入门插件基础您的第一个插件开发环境调试ActionAPI发布插件 高级插件捆绑插件,脚本和命令插...
    iOSDevLog阅读 17,456评论 0 34
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 172,077评论 25 707
  • 现在作为一名营养师的我,你们根本想不到我之前的生活状态:吸烟、喝酒、熬夜,熬夜干嘛?当然不是看书,不是写文章,而是...
    水默语阅读 692评论 8 4
  • 楼下不远处小卖部的店主是个温柔、善解人意的小妇人,她盈盈的浅笑、柔顺不做作的语调给人如沐春风的感觉,所以总是喜欢...
    彤乐阅读 446评论 0 0
  • 如今应该没多少人用卡机拍照了吧。一部好的手机抵得上卡机。要说手机比得过单反相机,还真没办法。但效果已经满足大多数人...
    小仕子阅读 362评论 0 1