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 提供了一些有用的技巧 另外查看他人寫的一些插件也是重要的學習來源。