设计师编程指南之Sketch插件开发 5
往期文章索引：
1 / 入门基本概念、page的相关操作
2 / artboard 、NSFileManager 和 NSString 关于文件及文件夹的相关操作
这期介绍 Shape 的一些操作，借助 Shape 可以实现更复杂的设计啦。
1
基本的概念
sketch 的 shape 是基于 MSShapeGroup 和 NSBezierPath 这两个类构成的。一般的过程是先定义 NSBezierPath ，然后新建一个 MSShapeGroup ，把前面定义的 NSBezierPath 添加到 MSShapeGroup 里，添加样式，最后再添加到 page 里。
在 sketch 的插件中，画布就是 MSShapeGroup ，画笔就是 NSBezierPath 。 NSBezierPath 类，就是贝塞尔路径，是用一系列直线和曲线来描述图形的对象。通过贝塞尔路径，你可以创建任意复杂的图形。这里的贝塞尔路径的绘图方法有点像 web 开发中的 canvas 里的绘图命令，比如：
新建两个点：
var point1=NSMakePoint(50, 70); var point2= NSMakePoint(350, 0);
创建贝塞尔路径，为了跟 canvas 类比，这边把变量命名为 ctx。
var ctx=[NSBezierPath bezierPath]; ctx.moveToPoint(point1); ctx.lineToPoint(point2);
这样就定义了一条从起点（50，70）至 终点（350，0）的直线啦。还可以加上矩形，先定义一个原点在（200，200）的宽为100，高为200的矩形：
var rect=NSMakeRect(200,200,100,200);
然后，绘制矩形：
ctx.appendBezierPathWithRect(rect);
最后，要在 sketch 显示出来，还需要把贝塞尔路径添加到一个 MSShapeGroup 的容器里 ，然后设置这个容器的样式，最后再添加到 page 里。
下面介绍完整的过程。
2
画直线
进入 Run Script 界面后，输入以下代码运行。
var doc=context.document;
var page=doc.currentPage();
//createBezierPath
var nsb=[NSBezierPath bezierPath]; nsb.moveToPoint(NSMakePoint(100,100)); nsb.lineToPoint(NSMakePoint(200,200));
var lineShape= [MSShapeGroup new]; lineShape.setBezierPath(nsb); lineShape.name='12';
// add border
var lineShapeStyle = lineShape.style(), borders = lineShapeStyle.borders();
if (borders.count() <= 0){ lineShapeStyle.addStylePartOfType(1); }; page.addLayers([lineShape])
这里注意需要给新建的 MSShapeGroup 设置样式（ Style ），这里设置的是 border 。
addStylePartOfType 里的可选参数为 0 、1 、2 、3 ，分别代表 fill 、border 、shadow 、inner shadow 。可以尝试都添加看看：
lineShapeStyle.addStylePartOfType(0); lineShapeStyle.addStylePartOfType(1); lineShapeStyle.addStylePartOfType(2); lineShapeStyle.addStylePartOfType(3);
把直线的样式修改下，在 page.addLayers 前加入以下代码：
// set border style
var border = borders[0];
border.setColor(MSImmutableColor.colorWithSVGString('red'));
border.thickness = 2; // set arrow;
lineShape.firstLayer().setEndDecorationType(1);
效果图下图所示：
3
动手实验
随便生成一堆直线，改变位置、宽度、颜色试试，如下图：
*
知识星球
更多 sketch 插件的开发，代码的下载，可以在知识星球交流。还包括：
1 看到一些好案例，关键技术解决方案，写出文章又不成体系，发星球;
2 我会在知识星球发一些非常机密的研究心得;
3 一些非常有技巧的知识，给付费用户;
4 公众号的迭代版本，针对文章发更为升级、核心的内容。
5 当然，还有资深的专家在星球里。
*
热门文章
*
关于公众号：
本公众号定期更新人工智能&设计&科技内容。
谈点设计，敲点代码，偶尔创作点人工智能实验产品。
码字不易，开启新的打赏方式：