设计师编程指南之Sketch插件开发 9 之 Shape中的oval
设计师编程指南之Sketch插件开发 9 之 Shape中的oval
mixlab
发布于 2018-04-17 16:04:47
发布于 2018-04-17 16:04:47
往期文章索引：
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);
本期内容比较简单，课后自行发挥想象力继续练习下吧！
本文参与 腾讯云自媒体分享计划，分享自微信公众号。
原始发表：2018-03-04，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读