sketch 플러그인 개발 탐색 여행 (1)

전언
================== 이 쓸데없는 말은 생략할 수 있다. =============================UI 엔지니어로서 sketch를 접한 지 얼마 되지 않아 작업 과정에서 일부 기능이 비교적 번거롭고 적합한 플러그인을 찾지 못하기 때문에 스스로 플러그인을 써서 UI 개발 과정의 문제를 해결하려고 한다.그러나 공식 문서를 보면 매우 어리석다. 영어가 없고 중국어가 없는 문서는 그 다음이다. 많은 것들이 문서가 완전하게 쓰여져 있다!!!인터넷의 다른 개발자들이 쓴 관련 글도 드물기 때문에 나는 기존의 공식 문서를 읽으면서 다른 사람의 원본을 보고 그 중의 방법 속성을 대담하게 추측하고 대담하게 실천하여 긴 길을 탐색하는 여행을 전개할 수밖에 없었다. ==================================쓸데없는 말 끝...=====================
1. cocoascript
sketch의 플러그인 본질은 명령의 집합입니다. 파일 접미사는.sketchplugin, 주로 코코스cript로 씁니다.cocoascript는javascript와objective-c 사이의 다리로서 js의 문법으로 플러그인을 쓸 때oc의 방법을 호출하여 개발을 더욱 간편하게 할 수 있습니다.구체적으로 어떻게 호출할 것인지, 우리는oc와cocoascript의 쓰기 방법을 각각 봅시다.oc:

NSString * value = [command valueForKey:kAutoresizingMask onLayer:currentLayer];

cocoascript:

var value = command.valueForKey_onLayer(kAutoresizingMask, currentLayer);

2. 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
플러그인 표시가 포함된 메뉴
자주 쓰는 종류
우리가 플러그인으로 그림 층, 텍스트 등을 처리할 때, 실제 조작하는 것은 아래와 같은 덩어리이다.

" Group (741958C5-E1CE-468F-9AB2-E853C0799423)",
" Control Center Grabber (936460F8-5773-4F47-89C2-C4BD246C63EC)",
" Date (9BE84955-A291-431D-8771-C36D51743FDD)",
" Charge (6F95F078-56BC-4FDA-A319-DE0FF8C50E13)",
" Notification Center Grabber (75CA34DC-7FA7-4D5B-96AB-922C23F74DC5)",

나도 처음 봤을 때 어리둥절한 표정이었어.
MSDocument
문서 객체를 나타내는 방법 및 등록 정보를 나열합니다. 1.close:, 문서를 닫습니다.2.currentPage: 그리고 setCurrentPage: (MSPage) 페이지는 현재 페이지(page)를 가져오거나 페이지를 설정하는 데 사용되며, 되돌아오는 것은 MSPage 대상이다.3. export:, 내보내기.4.showMessage: (NSString) 메시지로 캔버스 밑에 정보를 표시합니다.5.children, 현재 페이지의 모든 층과 슬라이스를 포함하는 그룹을 되돌려줍니다.6.addLayer: (MSLayer) layer, 문서에 레이어를 추가합니다.
MSLayer
가장 기본적인 대상은 도면층을 대표한다.그 중 몇 가지 방법과 속성을 열거한다.frame:, 읽기만 하고, 이 층의 크기와 캔버스의 위치를 되돌려줍니다.2.style:, 읽기만 하고, 경계선, 음영 등 이 층의 스타일 속성을 되돌려줍니다.3.name:,setName:(NSString)name.도면층의 이름과 설정된 도면층의 이름을 나타냅니다.4.isVisible:,setIsVisible:(BOOL)value.도면층이 표시되는지 여부와 도면층이 표시되는지 여부를 설정합니다.5.parentGroup:, 부모 요소를 반환합니다.6.isSelected:, 선택되었는지 확인하고true로 선택하지 않으면false입니다.7.absoluteRect:, 이 층의 절대 좌표 위치 범위를 되돌려줍니다....
MSLayerGroup
도면층 그룹, 실제로도 MSLayer 객체입니다.그 중 몇 가지 방법과 속성을 열거한다.addLayers: (NSArray) layers, 그룹에 레이어를 추가합니다.2. removeLayer:, 이 그룹에서 레이어를 삭제합니다....
MSSliceLayer
슬라이스를 나타냅니다.더 많은 종류를 알고 싶으면 이동하십시오:http://developer.sketchapp.com/reference/class/AppController/
4.context
명령이 대응하는 함수를 호출할 때, 함수에 context 대상을 전달합니다. context는 우리가 사용할 대상을 포함합니다.
document
현재 문서, MSDocument 객체
command
현재 명령에 액세스할 수 있습니다.
selection
현재 선택된 MSLayer입니다.
5. 실행 및 debuge
플러그인을 직접 실행합니다. console을 통해.app의 필터 로그 플러그인 이름을 선택해서 보십시오.
6. 실천
먼저 작은 예를 들면 후속 문장은 실천 중의 몇 가지 방법 속성과 쓰기 방법을 이야기할 것이다.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);//    
}