Sketch插件開發入門

<a href="http://developer.sketchapp.com/introduction/plugin-bundles/" target="_blank">http://developer.sketchapp.com/introduction/plugin-bundles/</a>

sketch 插件就是腳本的集合。每個腳本定義了一個或者多個指令。這些指令可以拓展sketch的功能。sketch插件以 <code>.sketchplugin</code>結尾,其實就是個檔案夾，把字尾删除後可以直接打開。

這個json檔案聲明插件的中繼資料.sketch會讀取這個配置檔案的資訊，得到command的名字和command對應函數實作.

這檔案裡面最重要的配置項是commands和menu：

聲明一組command的資訊。每個command以字典形式存在。

script : 實作指令功能的函數所在的腳本

handler: 函數名，該函數實作指令的功能。sketch在調用該函數時，會傳入一個context參數,context是個字典，裡面包含了很多資訊，下文會講到。如果你的沒有指定handler，sketch會預設是script裡的onrun函數

shortcut：指令的快捷鍵

name：會顯示在sketch的plugin 的菜單裡

identifier:唯一辨別，建議用com.xxxx.xxx格式

sketch加載插件的時候，會根據它指定的資訊，順序地在菜單欄中顯示指令名。

<a href="http://developer.sketchapp.com/introduction/plugin-scripts/#script-context" target="_blank">入門</a>

this is a bridge that lets you write javascript scripts that can call native objective-c/cocoa.using it, you can write the logic of your plugin in javascript, but can call the actual classes and methods that implement sketch itself when you want to make it do something.

在使用中用js調objective-c的方法時，

方法調用 用 ‘.’ 文法

參數都放在‘（）’裡頭

oc中被參數分割開的函數名，用 ‘ _ ’連接配接.

傳回值，js統一用var類型 ，js是弱類型

比如: msplugin的接口<code>valueforkey:onlayer:</code>

oc:

cocoascript:

當我們輸入插件定制的指令時，sketch會去尋找改指令對應的實作函數， 并傳入context變量。context 包含以下變量：

scriptpath: <code>nsstring</code> 目前執行腳本的絕對路徑

scripturl: 目前執行腳本的絕對路徑，跟 scriptpath不同的是它是個 nsurl 對象

<code>msplugincommand</code>對象，代表插件中單個指令，可以用來通路目前執行的指令，也可以用來在圖層中存儲自己的擴充中繼資料。

在圖層中存取的拓展資料，也可以在不同插件中共享。

selection

目前選擇的document下的一組被選擇的mslayers對象。

如果目前隻選了一個圖層,可以這樣擷取：

主要依賴打log.用console.app過濾日志檢視,過濾标簽可以是你寫的插件的名字，也可以用“sketch”過濾，但是這樣會得到所有指令的執行日志。

或者在代碼中用視圖控件顯示，好處就是不用不用開第三方app.比如：

<code>alert</code>, <code>[doc showmessage]</code> ，<code>showmessage("message")</code>

有人dump出來的sketch的頭檔案。資訊量非常豐富哈哈～

<a href="https://github.com/abynim/sketch-headers" target="_blank">https://github.com/abynim/sketch-headers</a>

以這個設計圖為例

<a href="https://github.com/bouchenoiremarc/sketch-constraints/blob/master/example.sketch" target="_blank">https://github.com/bouchenoiremarc/sketch-constraints/blob/master/example.sketch</a>

<code>組</code>：

msartboardgroup：畫闆

msshapegroup：組裡的圖層都是shape ,比如wifi

mslayergroup：比如區域網路信号

<code>圖層基類</code> :

mslayer

<a href="http://developer.sketchapp.com/reference/mslayer/" target="_blank">http://developer.sketchapp.com/reference/mslayer/</a>

<a href="https://github.com/abynim/sketch-headers/blob/master/headers/mslayer.h" target="_blank">https://github.com/abynim/sketch-headers/blob/master/headers/mslayer.h</a>

<code>文本層</code>：

mstextlayer

<a href="https://github.com/abynim/sketch-headers/blob/master/headers/mstextlayer.h" target="_blank">https://github.com/abynim/sketch-headers/blob/master/headers/mstextlayer.h</a>

<code>圖形層</code>:

<a href="https://github.com/abynim/sketch-headers/blob/master/headers/msshapepathlayer.h" target="_blank">https://github.com/abynim/sketch-headers/blob/master/headers/msshapepathlayer.h</a>

<code>msovalshape</code>:

<code>msbitmaplayer</code>:

<a href="http://developer.sketchapp.com/reference/msbitmaplayer/" target="_blank">http://developer.sketchapp.com/reference/msbitmaplayer/</a>

<a href="https://github.com/abynim/sketch-headers/blob/master/headers/msbitmaplayer.h" target="_blank">https://github.com/abynim/sketch-headers/blob/master/headers/msbitmaplayer.h</a>

1.1 擷取layer的parentgroup，parent對象可能是mspage、msartboardgroup或mslayergroup

1.2 獲得自己的frame,手動計算縮放比例，控制。順便說一句，sketch有個殘暴的接口:

利用sketch已經實作的一些響應接口，插件少寫代碼，得到的效果更好。

在sketch－header中可以看到到，sketch可以響應的 action,比如:

這些頭檔案，都繼承了msbasealignlayersaction。msbasealignlayersaction繼承msbaseaction。msbaseaction繼承了nsresponder 0 0呵呵哈。