前言
===================这段废话可略过。===================
作为UI工程师，刚接触sketch不久，在工作过程中会发现有些功能用起来比较繁琐，而又找不到适合的插件来解决，所以就想要自己来写插件解决UI开发过程的问题。然而看了下官方文档很是懵逼，全英文无中文文档倒是其次，很多东西文档根本木有写全！！！网上的其他开发者写的相关文章也寥寥无几，所以我只好一边阅读现有的官方文档一边看别人的源码，大胆猜测大胆实践其中的方法属性，就此展开漫漫长路的探索之旅。
===================废话结束。。。。===================
一、cocoascript
sketch的插件本质就是一堆命令的合集，文件后缀为.sketchplugin，主要用cocoascript来写。
cocoascript是javascript和objective-c间的一个桥梁，我们在使用js的语法写插件的时候，能够调用oc的一些方法，使得我们的开发更为简便。
具体怎么调用呢，我们来分别看一下oc和cocoascript的写法。
oc:
NSString * value = [command valueForKey:kAutoresizingMask onLayer:currentLayer];
cocoascript:
var value = command.valueForKey_onLayer(kAutoresizingMask, currentLayer);
二、sketch插件的结构
mrwalker.sketchplugin
Contents/
Sketch/
manifest.json
shared.js
Circles.cocoascript
Rectangles.cocoascript
Resources/
Screenshot.png
Icon.png
manifest.json
主要包含插件的配置信息，比如插件的功能、快捷键、处理命令函数、插件名称、作者名称等，告诉sketch每个命令对应由哪一个函数进行处理。
{
"name": "Select Shapes",
"description": "Plugins to select and deselect shapes",
"author": "Joe Bloggs",
"homepage": "http://github.com/example/sketchplugins",
"version": 1.0,
"identifier": "com.example.sketch.shape-plugins",
"updateURL": "https://github.com/downloads/example/sketchplugins/sketchplugins.json",
"compatibleVersion": 3,
"bundleVersion": 1,
"commands": [
{
"name": "All",
"identifier": "all",
"shortcut": "ctrl shift a",
"script": "shared.js",
"handler": "selectAll"
},
{
"name": "Circles",
"identifier": "circles",
"script": "Select Circles.cocoascript"
}
],
"menu": {
"items": [ "all", "circles", "rectangles" ]
}}
下面解释下这些分别代表什么
commands
插件命令的合集
name
命令的名称
shortcut
命令的快捷键
handler
命令调用的处理函数，若没指定则默认为onRun函数
script
命令对应的处理文件
menu
包含插件显示的菜单
三、常用的类
我们插件处理图层、文字等等时，实际操作的就是类似下面这样一坨东西。
"<MSLayerGroup: 0x6180001d3b00> Group (741958C5-E1CE-468F-9AB2-E853C0799423)",
"<MSShapeGroup: 0x7f82e052de30> Control Center Grabber (936460F8-5773-4F47-89C2-C4BD246C63EC)",
"<MSTextLayer: 0x7f82e052df40> Date (9BE84955-A291-431D-8771-C36D51743FDD)",
"<MSLayerGroup: 0x6180001d3ce0> Charge (6F95F078-56BC-4FDA-A319-DE0FF8C50E13)",
"<MSShapeGroup: 0x7f82e052e1c0> Notification Center Grabber (75CA34DC-7FA7-4D5B-96AB-922C23F74DC5)",
我刚开始看到的时候也是一脸懵逼……那么这堆MS开头的东东到底代表什么呢。
MSDocument
代表文档对象，列举其中一些方法和属性：
1.close:，关闭文档。
2.currentPage:以及 setCurrentPage:(MSPage)page，用来获取当前页面（page）或设置页面，返回的是一个MSPage对象。
3.export:，导出。
4.showMessage:(NSString)message，在画布底部显示一些信息。
5.children，返回一个数组，包含当前page所有图层和切片。
6.addLayer:(MSLayer)layer，添加图层到该文档。
……
MSLayer
最基本的对象，代表图层。列举其中一些方法和属性：
1.frame:，只读，返回该图层的大小及在画布上的位置。
2.style:，只读，返回该图层的样式属性，如边框、阴影等。
3.name:，setName:(NSString)name。表示图层的名称以及设置图层的名称。
4.isVisible:，setIsVisible:(BOOL)value。表示图层是否可见以及设置图层是否可见。
5.parentGroup：,返回父元素。
6.isSelected :，看是否被选中，选中为true否则为false。
7.absoluteRect:，返回该图层的绝对坐标定位范围。
……
MSLayerGroup
图层组，实际也是一个MSLayer对象。列举其中一些方法和属性：
1.addLayers:(NSArray)layers，添加一个层到这个组。
2.removeLayer：，从这个组删除一个图层。
……
MSSliceLayer
表示切片。
想了解更多类请移步：
http://developer.sketchapp.com/reference/class/AppController/
四、context
命令调用对应函数时，会给函数传入一个context对象，context包含一些我们会用到的对象。
document
当前文档，MSDocument对象。
command
可用来访问当前命令。
selection
当前被选中的MSLayer。
五、运行与debuge
直接运行插件，通过console.app的过滤日志筛选插件名来查看。
六、一些实践
先举一些小例子，后续的文章还会讲到实践中的一些方法属性以及写法。
1.导出切片：
var doc = context.document//当前文档
var slice = doc.currentPage().slices().firstObject();//选择当前page的切片的第一个
doc.saveArtboardOrSlice_toFile(slice,"~/desktop/test.png");//导出切片
2.放大选中图层：
var selection = context.selection;
var layer = selection.firstObject();
if(layer) {
//图层的中心点
var midX=layer.frame().midX();
var midY=layer.frame().midY();
// 放大两倍
layer.multiplyBy(2.0);
// 把图层移到原来的中心点
layer.frame().midX = midX;
layer.frame().midY = midY;
}
3.迭代对选中的图层进行处理
var selection = context.selection;
var layer = null;
//迭代选择的图层
var loopLayer = selection.objectEnumerator();
while(layer = loopLayer.nextObject()){
exportImage(layer);//处理图层
}
网友评论