设计师编程指南之Sketch插件开发 4
为什么写这个系列的文章,一是因为网上相关的 sketch 插件开发教程太少,官方的文档写得不算太清楚,二是因为本公众号长期在研究智能设计相关的内容,基于 sketch 做一些智能设计的辅助工具也在考虑的范围之内,于是就诞生了这个系列的文章。
另外,设计师如果想学编程,也可以从 sketch 的插件开发入手, 0 基础即可,本公众号会不定期举行 0 基础入门编程系列的线下活动,花一天时间,手把手教学。往期举办的活动,可以点击我们利用周末尝试了一次CO-CODING活动查看。
ps:本系列教程基于最新版的 sketch 48。
往期文章索引:
1 / 入门基本概念、page的相关操作
2 / artboard 、NSFileManager 和 NSString 关于文件及文件夹的相关操作
这期介绍 NSPasteboard 、text 的操作。
1
新建一个 text
var doc = context.document;
var page=doc.currentPage();
var textLayer=[MSTextLayer new];
var str='hello world'; textLayer.setStringValue(str); textLayer.name=str;
textLayer.fontSize=20;
var textFrame=[textLayer frame]; textFrame.x=100; textFrame.y=100; textFrame.width=100; textFrame.height=200; page.addLayer(textLayer)
2
竖排文字
做设计的时候,经常会碰到如何输入竖排的文字吧?解决办法一般是把文本框的宽度缩小到一个字的宽度。实际上,我们还可以通过代码来解决~
var doc = context.document;
var page=doc.currentPage();
var textLayer=[MSTextLayer new];
var str='春色满园关不住,一枝红杏出墙来。';
var strs=[];
for(var i=0;i<str.length;i++){
var s=str[i]; strs.push(s) };
var newStr=strs.join('\n') log(newStr) textLayer.setStringValue(newStr); textLayer.name=str;
var textFrame=[textLayer frame]; textFrame.x=100; textFrame.y=100; textFrame.width=10; textFrame.height=200; page.addLayer(textLayer)
当你有很多很多的字需要竖排的时候,代码的优势就体现出来啦~
3
剪切板 NSPasteboard 的相关操作
获取剪切板中的内容
var pasteBoard=NSPasteboard.generalPasteboard();
var stringFromPasteBoard = [pasteBoard stringForType:NSPasteboardTypeString];
log(stringFromPasteBoard)
清空剪切板
[pasteBoard clearContents];
写入剪切板
[pasteBoard setString:@'stringToWrite' forType:NSStringPboardType];
4
动手实验
现在你可以试着开发一个小功能啦,比如:复制任意一段文字,自动排成竖版的段落版面。效果如下图
另外,还可以结合第二期的 artboard ,把竖排的段落拷贝到新建的 artboard 上。
*
知识星球
更多 sketch 插件的开发,代码的下载,可以在知识星球交流。还包括:
1 看到一些好案例,关键技术解决方案,写出文章又不成体系,发星球;
2 我会在知识星球发一些非常机密的研究心得;
3 一些非常有技巧的知识,给付费用户;
4 公众号的迭代版本,针对文章发更为升级、核心的内容。
5 当然,还有资深的专家在星球里。
*
热门文章
*
关于公众号:
本公众号定期更新人工智能&设计&科技内容。
谈点设计,敲点代码,偶尔创作点人工智能实验产品。
码字不易,开启新的打赏方式: