前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >设计师编程指南之Sketch插件开发 6

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

作者头像
mixlab
发布2018-04-17 15:49:16
5430
发布2018-04-17 15:49:16
举报

往期文章索引:

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 。

1

熟悉 NSBezierPath

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

代码语言:javascript
复制
var doc=context.document;
var page=doc.currentPage();

var p1=NSMakePoint(0,0);
var p2=NSMakePoint(100,30);
var p3=NSMakePoint(100,100);

//createBezierPath

var 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 border

var lineShapeStyle = lineShape.style(),

    borders = lineShapeStyle.borders();

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

    lineShapeStyle.addStylePartOfType(1);

};

// set border style

var border = borders[0];
border.setColor(MSImmutableColor.colorWithSVGString('black'));
border.thickness = 2;

page.addLayers([lineShape])

把点的顺序稍微调整下:

代码语言:javascript
复制
nsb.moveToPoint(p1);
[nsb
   curveToPoint:p1
   controlPoint1:p2
   controlPoint2:p3
];

2

动手做实验

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

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

本文参与 腾讯云自媒体分享计划,分享自微信公众号。
原始发表:2018-02-26,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 科技Mix设计Lab 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 我们可以动手绘制玫瑰曲线 Rhodonea Curve:平面内,围绕某一中心点平均分布整数个正弦花瓣的曲线。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档