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

554 阅读2分钟
原文链接: mp.weixin.qq.com

往期文章索引:

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

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

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

4 / NSPasteboard 、text 的操作

5/ Shape 的一些操作,主要介绍 line 及 rect

上一期主要介绍 line rect ,这期介绍 curve

sketch curve 是通过 NSBezierPath 绘制的,通过3个点(每个点是一个 NSMakePoint 对象 ),绘制一条 bezier path 。

熟悉 NSBezierPath 

如上图所示的三点,绘制一条 bezier path

var doc=context.document;var page=doc.currentPage();var p1=NSMakePoint(0,0);var p2=NSMakePoint(100,30);var p3=NSMakePoint(100,100);//createBezierPathvar nsb=[NSBezierPath bezierPath];

    nsb.moveToPoint(p1);

    [nsb
      curveToPoint:p3
      controlPoint1:p1
      controlPoint2:p2
    ];var lineShape= [MSShapeGroup new];

    lineShape.setBezierPath(nsb);

    lineShape.name=(new Date()).getTime().toString();// add bordervar lineShapeStyle = lineShape.style(),

    borders = lineShapeStyle.borders();if (borders.count() <= 0){

    lineShapeStyle.addStylePartOfType(1);

};// set border stylevar border = borders[0];
border.setColor(MSImmutableColor.colorWithSVGString('black'));
border.thickness = 2;

page.addLayers([lineShape])

把点的顺序稍微调整下:

nsb.moveToPoint(p1);
[nsb
   curveToPoint:p1
   controlPoint1:p2
   controlPoint2:p3
];

2

动手做实验

我们可以动手绘制玫瑰曲线 Rhodonea Curve:平面内,围绕某一中心点平均分布整数个正弦花瓣的曲线。

写一个 for 循环,把360度范围内的 x y 的坐标求出,然后用  BezierPath 绘制出每个花瓣,实验结果如下:

*

知识星球

更多 sketch 插件的开发,代码的下载,可以在知识星球交流。还包括:

1 看到一些好案例关键技术解决方案 ,写出文章又不成体系,发星球;

2 我会在知识星球发一些非常机密的研究心得;

3 一些非常有技巧的知识,给付费用户;

4 公众号的迭代版本,针对文章发更为升级、核心的内容。

5 当然,还有资深的专家在星球里。

*

热门文章

DIY一个Sketch插件,生成猫猫狗狗的全家福

我们利用周末尝试了一次CO-CODING活动

全栈设计+编程的方法论,以“猜对联”小程序为例

*

关于公众号:

本公众号定期更新人工智能&设计&科技内容。

谈点设计,敲点代码,偶尔创作点人工智能实验产品

码字不易,开启新的打赏方式: