Sketch 插件制作 － 简介

简介

Sketch 插件以 .sketchplugin 作为扩展名，使用 CocoaScript 作为开发语言，保存于 ~/Library/Application Support/com.bohemiancoding.sketch3/Plugins 文件夹中。其中主要的文件是：manifest.json，它定义了插件的功能以及对应的快捷键、功能的处理器。另外处理函数在 *.cocoascript 中定义。

manifest.json

{
  "author" : "author",
  "commands" : [
    {
      "script" : "script.cocoascript",
      "handler" : "handler",
      "shortcut" : "",
      "name" : "name",
      "identifier" : "name"
    }
  ],
  "menu" : {
    "items" : [
      "createrelations"
    ],
    "title" : "title"
  },
  "identifier" : "com.identifier",
  "version" : "1.0",
  "description" : "",
  "authorEmail" : "",
  "name" : "name"
}

以上就是 manifest.json 中的基本内容，commands 中定义了插件有哪些功能以及对应功能的名称、处理器等信息。

*.cocoascript

cocoascript 文件中以

var funcName = function(context) {
    // do something
};

的形式定义插件的处理函数。

Context

当处理器被调用时，函数会接受到一个 context 对象，这个对象中包括了主要的处理对象。

• command: MSPluginCommand 对象。

• document: MSDocument 对象。这个对象就是我们当前打开的文件对象。

• selection: 当前选中的所有 layer 的 NSArray 对象。

以及还有 scriptPath、scriptURL 。

Document

document 是一个 MSDocument 对象，它代表了一个我们打开的文档对象，详细文档：http://developer.sketchapp.com/reference/MSDocument/。其中有一些常用的属性与方法：

• currentPage: 返回一个当前获得焦点的 MSPage 对象。

• showMessage:(NSString)message: 可以在 Sketch 的底部显示一条消息，需要注意的是传入的参数是 NSString 对象。

• (CGFloat)zoomValue: 返回当前 docment 的缩放比例。

• currentView: 返回当前的画布（MSContentDrawView）对象。可以使用这个对象来确定当前画布的尺寸。

• scrollOrigin: 返回当前移动的原点位置，需要注意的是这个原点位置需要取反并除以缩放比例才是真实的原点位置。

MSPage

page 对象是我们经常需要操作的一个对象。可以通过 currentArtboard: 获取当前获得焦点的 artboard；可以使用 addLayers:(NSArray)array 来添加 layer；使用 duplicate 来复制当前的 page；使用 name:, setName:(string)name 来获取或设置 page 的名称。

MSLayerGroup&MSArtboardGroup

Group 是一堆 layer 的组合，他有一些重要的方法，如：addLayer:、removeLayer:、addLayerOfType: 可以用来添加或删除一个 layer。需要注意的是 addLayerOfType: 方法暂时只接受 rectangle、group 和 text 三种类型（文档中并没有包括 group 类型）。

我要怎么添加一条线？答案是使用 `NSBezierPath`, 所有 Cocoa 的对象都可以直接在 `.cocoascript`     中使用。

ArtboardGroup 是 LayerGroup 的一个子类，我并没有使用其中的一些功能，具体文档可以查看：http://developer.sketchapp.com/reference/MSArtboardGroup/

MSLayer

Layer 对象就是平常在 Sketh 中使用的各种图层。可以使用 absoluteRect: (readonly) 获取该图层在 page 中的绝对位置，这里有一个需要注意的是在使用 MSContentDrawView 对象的 centerRect 方法将试图居中到指定的 layer 时，需要使用 absoulteRect 来重新构建 NSRect 对象，而不是文档中的 rect ，因为 rect 是相对于父图层的位置。

一些 Tips

• 可以使用 NSPredicate 来查找想要的 Layer。 page、layerGroup 和 ArtboardGroup 都有一个 children 参数，返回一个 NSArray 对象，可以配合 NSPredicate 来做筛选与查找。

• 在为 ArtboardGroup 对象设置宽度时需要使用负数......

• 使用 LayerGroup 的 resizeToFitChildrenWithOption 方法可以使 group 适应内部 layer 的大小，在内部是 text 的时候尤其有效。

这次只是简单的做了一个插件，基本了解了一下 Sketch 插件的制作。

参考内容

官方文档
官方的代码 Demo
官方提供的一些资源 其中 Sketch-Plugins-Cookbook 提供了一些有用的技巧
另外查看他人写的一些插件也是重要的学习来源。