设计师编程指南之Sketch插件开发 9 之 Shape中的oval

往期文章索引:

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

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

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

4 / NSPasteboard 、text 的操作

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

6/ Shape的curve操作

7/ GUI

8/ Cocoa基础

本期介绍 Shape 里的 oval ( 圆形 )。

1

画圆

sketch 里画圆的命令是基于 MSOvalShape 类。先生成一个圆形试试:

var doc=context.document;

var page=doc.currentPage();
var ovalShape = MSOvalShape.alloc().init();
ovalShape.frame = MSRect.rectWithRect(NSMakeRect(0,0,50,50));

var shapeGroup=MSShapeGroup.shapeWithPath(ovalShape);
var fill = shapeGroup.style().addStylePartOfType(0);

fill.color = MSColor.colorWithRGBADictionary({r: 0.1, g: 0.1, b: 0.8, a: 1});

page.addLayer(shapeGroup);

2

颜色

颜色的设置能不能像 web 开发那样方便呢,可以的, sketch 通过封装一个函数可以达到 Hex 、rgba 、 keywords 、hls 颜色的直接使用,代码如下。

function MSColorFromString(color) {    
return MSImmutableColor.colorWithSVGString(color).newMutableCounterpart()
}

// Hex

var c1=MSColorFromString("#33AE15"),
    c2=MSColorFromString("#145515FF");

// rgb/rgba

var c3=MSColorFromString("rgb(255,200,0)"),
    c4=MSColorFromString("rgba(55,0,0,0.5)");

// Color keywords

var c5=MSColorFromString("red");

// hls

var c6=MSColorFromString("hsl(270, 60%, 50%, .15)");

可以打印出来,看看数据。

3

在某个区域随机生成各种颜色的圆

把上文画圆的命令封装成函数:

function addOval(color,x,y,w,h){
    var ovalShape = MSOvalShape.alloc().init();

        ovalShape.frame = MSRect.rectWithRect(NSMakeRect(x,y,w,h));

    var shapeGroup=MSShapeGroup.shapeWithPath(ovalShape);

    var fill = shapeGroup.style().addStylePartOfType(0);
       
    fill.color = color;

    page.addLayer(shapeGroup);
}

调用下:

var doc=context.document;
var page=doc.currentPage();
var w=20,h=20;

addOval(c1,Math.random()*300,Math.random()*300,w,h);
addOval(c2,Math.random()*300,Math.random()*300,w,h);
addOval(c3,Math.random()*300,Math.random()*300,w,h);
addOval(c4,Math.random()*300,Math.random()*300,w,h);
addOval(c5,Math.random()*300,Math.random()*300,w,h);
addOval(c6,Math.random()*300,Math.random()*300,w,h);

本期内容比较简单,课后自行发挥想象力继续练习下吧!

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

原文发表时间:2018-03-04

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏liuchengxu

Vim 文本对象指南 (1)

本文还是介绍一些基本内容, 关于插件使用, 可以查看完整配置 space-vim.

882
来自专栏C/C++基础

web前端开发初学者十问集锦(1)

答:script标签可以放置在html文件的任何地方(any where),比如既可以放置在html标签外,也可以放置在head内,也可以放置在body内,也可...

821
来自专栏葡萄城控件技术团队

CoffeeScript和Sass提高Web开发效率

如果您是一位每天都要编写JavaScript和Css的Web前端开发人员,可能您已经开始感觉到JavaScript的关键字 var, function, {} ...

2317
来自专栏对角另一面

读Zepto源码之Selector模块

Selector 模块是对 Zepto 选择器的扩展,使得 Zepto 选择器也可以支持部分 CSS3 选择器和 eq 等 Zepto 定义的选择器。 在阅读本...

1980
来自专栏软件开发

前端MVC Vue2学习总结(三)——模板语法、过滤器、计算属性、观察者、Class 与 Style 绑定

Vue.js 使用了基于 HTML 的模版语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML ,...

60610
来自专栏前端儿

前端代码相关规范

项目目录和文件的命名使用小写字母,避免使用大写或驼峰,多个单词以下划线 _ 分隔  如:my_project/cast_detail.js

3393
来自专栏C/C++基础

web前端开发初学者十问集锦(5)

(1)立即执行函数的定义 立即执行函数(Immediately Invoked Function)是在页面加载时立即被执行的函数。

912
来自专栏程序生活

括号配对问题描述输入输出样例输入样例输出解析代码实现运行结果参考链接

括号配对问题-题目链接 描述 现在,有一行括号序列,请你检查这行括号是否配对。 输入 第一行输入一个数N(0<N<=100),表示有N组测试数据。后面的N行输入...

3325
来自专栏与神兽党一起成长

手工实现表单重置的部分功能

首先我必须说几乎所有的人都不需要自己实现表单重置的功能,表单重置功能只需要一个reset类型的input就足够了。<input type="reset" />

1563
来自专栏青青天空树

小程序报错数据传输长度为 xxx 已经超过最大长度 xxx

 这个错误通常在通过base64给images赋值时发生,setData()微信设置的一次最大传输长度为1M,所有如果编码后的base64字符串长度超过了1M就...

2891

扫码关注云+社区

领取腾讯云代金券