往期文章索引:
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
动手实验
随便生成一堆直线,改变位置、宽度、颜色试试,如下图: