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

往期文章索引:

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

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])

把点的顺序稍微调整下:

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

2

动手做实验

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

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

原文发布于微信公众号 - 科技Mix设计Lab(Design-AI-Lab)

原文发表时间:2018-02-26

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Deep learning进阶路

caffe随记(二) --- 数据结构简介

caffe随记(二) --- 数据结构简介 注:这篇文章博文我写的内容有点多,建议看一下左上角的目录,对本文结构有个大致了解。 1、Blob Blob其实...

2580
来自专栏Python小屋

Python绘制三次贝塞尔曲线

对于贝塞尔曲线而言,其特点在于第一个控制点恰好是曲线的起点,最后一个控制点是曲线的终点,其他控制点并不在曲线上,而是起到控制曲线形状的作用。另外,曲线的起点处与...

4886
来自专栏PPV课数据科学社区

TensorFlow 数据集和估算器介绍

TensorFlow 1.3 引入了两个重要功能,您应当尝试一下: 数据集:一种创建输入管道(即,将数据读入您的程序)的全新方式。 估算器:一种创建 Ten...

3229
来自专栏算法channel

机器学习储备(9):matplotlib绘图原理及实例

? matplotlib绘图的基本元素都包括都哪些?常用的绘图API如何应用。本文做个入门介绍吧。 1 基本元素 通过一个大部分都是用默认值的例子,初步认识下...

3428
来自专栏有趣的Python

14- 深度学习之神经网络核心原理与算法-TensorBoard使用

1724
来自专栏Small Code

【TensorFlow】理解 Estimators 和 Datasets

Google 在 2017 年 9 月 12 号的博文 Introduction to TensorFlow Datasets and Estimators 中...

1.3K8
来自专栏IT派

最新|官方发布:TensorFlow 数据集和估算器介绍

TensorFlow 1.3 引入了两个重要功能,您应当尝试一下: 数据集:一种创建输入管道(即,将数据读入您的程序)的全新方式。 估算器:一种创建 Tens...

4305
来自专栏Python攻城狮

Python数据科学(六)- 资料清理(Ⅰ)1.Pandas1.资料筛选2.侦测遗失值3.补齐遗失值

成功爬取到我们所需要的数据以后,接下来应该做的是对资料进行清理和转换, 很多人遇到这种情况最自然地反应就是“写个脚本”,当然这也算是一个很好的解决方法,但是,p...

1213
来自专栏QQ音乐技术团队的专栏

GIF简述及其在QQ音乐的应用

GIF(Graphics Interchange Format)是CompuServe公司在1987年开发的图像文件格式,原义是图像互换格式。GIF是一种基于L...

6910
来自专栏算法修养

文本分类学习 (十)构造机器学习Libsvm 的C# wrapper(调用c/c++动态链接库)

前言: 对于SVM的了解,看前辈写的博客加上读论文对于SVM的皮毛知识总算有点了解,比如线性分类器,和求凸二次规划中用到的高等数学知识。然而SVM最核心的地方应...

852

扫码关注云+社区