设计师编程指南之Sketch插件开发 5
往期文章索引：
1 / 入门基本概念、page的相关操作
2 / artboard 、NSFileManager 和 NSString 关于文件及文件夹的相关操作
3 / DIY一个Sketch插件，生成猫猫狗狗的全家福
4 / NSPasteboard 、text 的操作
这期介绍 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
动手实验
随便生成一堆直线，改变位置、宽度、颜色试试，如下图：
腾讯云开发者
