设计师编程指南之Sketch插件开发 5

mixlab

发布于 2018-04-17 15:49:51

8100

发布于 2018-04-17 15:49:51

文章被收录于专栏：MixLab科技+设计实验室

往期文章索引：

1 / 入门基本概念、page的相关操作

2 / artboard 、NSFileManager 和 NSString 关于文件及文件夹的相关操作

3 / DIY一个Sketch插件，生成猫猫狗狗的全家福

4 / NSPasteboard 、text 的操作

这期介绍 Shape 的一些操作，借助 Shape 可以实现更复杂的设计啦。

基本的概念

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 里。

下面介绍完整的过程。

画直线

进入 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);

效果图下图所示：