DIY一个Sketch插件，生成猫猫狗狗的全家福
最近朋友圈都在玩的全家福：
看了下是使用 cocos2D 引擎制作的，
http://www.cocos.com/creator
主要是图片合成，利用前端的 canvas 即可生成。然后，随便看了下，发现图片素材还不错，于是拿来测试下新写的插件效果：
用来生成各种全家福的图片还不错～在测试下其他图片，这次是一堆的小狗（黑白的）：
点击放大寻找藏在里面的人
如何实现的？
1
读取本地的多张图片
sketch 插件里调用一个打开文件对话框的参数设置有点类似于 electron 。如果需要选择其他的文件类型，只要设置 fileTypes 里的文件后缀名即可，注意这里的文件后缀名不区分大小写。
function openImageFiles() {
var fileTypes = [NSArray arrayWithObjects: @"png", @"jpg",@"jpeg"];
var imageFileNames = [];
var panel = [NSOpenPanel openPanel];
[panel setCanChooseFiles: true];
[panel setCanChooseDirectories: false];
[panel setAllowsMultipleSelection: true];
[panel setAllowedFileTypes: fileTypes];
var isConfirm = [panel runModal];
//isConfirm
if (isConfirm) {
var firstURL =[[panel URLs] objectAtIndex:0];
var firstURLPath =[NSString stringWithFormat:@"%@", firstURL];
var loop = [[panel URLs] objectEnumerator];
while (url = [loop nextObject]) {
imageFileNames.push([url path]);
};
return imageFileNames
}
};
2
新建一个 MSArtboardGroup
此部分在《 设计师编程指南之Sketch插件开发 2 》介绍过了，是我们每次生成的画布。其中 _artboardFrame 主要用于最后设置画布大小之用。
var _newArtboard = [MSArtboardGroup new];
_newArtboard.name = (new Date()).getTime().toString();
var _artboardFrame =_newArtboard.frame();
3
生成每张图片的位置
这边用到了 doc 中的 askForUserInput ，让用户输入本次生成的画布长宽。我们只要计算每次生成的图片位置 x 加上图片的宽度 width 中的最大一个作为整个画布的宽度即可，高度也是类似的逻辑，见下方代码：
var _ab_w = 0,
_ab_h = 0,
_w=[doc askForUserInput:@"width" initialValue:@"2000"],
_h=[doc askForUserInput:@"height" initialValue:@"200"];
for (var i = 0; i < data.length; i++) {
var _url = data[i];
var _x = Math.abs(Math.random() * _w * Math.tanh(i)),
_y = Math.abs(Math.random() * _h * Math.cos(i));
var _imageLayer = drawImg(_x, _y, _url);
_ab_w = Math.max(_imageLayer.width, _ab_w);
_ab_h = Math.max(_imageLayer.height, _ab_h);
_newArtboard.addLayer(_imageLayer.layer);
};
把 _artboardFrame 更新下，
_artboardFrame.setX(0); _artboardFrame.setY(0); _artboardFrame.setWidth(_ab_w); _artboardFrame.setHeight(_ab_h);
4
把图片绘制到 sketch
这里没有采用 MSBitmapLayer ，而是通过先绘制一个矩形，然后再通过设置矩形的 fill 样式，把图片绘制到 sketch 。
function drawImg(x, y, _url) {
var image = [[NSImage alloc] initByReferencingFile:_url];
var img = MSImageData.alloc().initWithImage(image);
var rect = drawRect(x, y, image.size().width, image.size().height);
img2Fill(rect, img);
return {
layer: rect,
width: image.size().width + x,
height: image.size().height + y
};
};
drawRect 运用了 NSBezierPath ，这个会在后面 sketch 插件开发指南中更新它的一些操作。
function drawRect(x, y, w, h) {
var nsb = [NSBezierPath bezierPath];
nsb.appendBezierPathWithRect(NSMakeRect(x, y, w, h));
var lineShape = [MSShapeGroup new];
lineShape.setBezierPath(nsb);
lineShape.name = '12';
var lineShapeStyle = lineShape.style(),
fills = lineShapeStyle.fills();
if (fills.count() <= 0) {
lineShapeStyle.addStylePartOfType(0);
};
return lineShape
};
img2Fill 主要是设置了 style 里的 fills 。
function img2Fill(layer, img) {
let style = layer.style();
let fill = style.fills()[0];
fill.setFillType(4);
fill.setImage(img);
fill.setPatternFillType(1);
};
5
保存成 sketch 插件
在 Run script 界面的左下角，有个 save ，保存下代码即可。
插件使用效果：
至此，核心代码已经介绍完毕。你可以自己动手试试～
sketch 插件开发往期文章索引：
1 / 入门基本概念、page的相关操作
2 / artboard 、NSFileManager 和 NSString 关于文件及文件夹的相关操作
*
知识星球
更多sketch插件的开发，代码的下载，可以在知识星球交流。还包括：
1 看到一些好案例，关键技术解决方案，写出文章又不成体系，发星球;
2 我会在知识星球发一些非常机密的研究心得;
3 一些非常有技巧的知识，给付费用户;
4 公众号的迭代版本，针对文章发更为升级、核心的内容。
5 当然，还有资深的专家在星球里。
*
热门文章
*
关于公众号：
本公众号定期更新人工智能&设计&科技内容。
谈点设计，敲点代码，偶尔创作点人工智能实验产品。
码字不易，开启新的打赏方式：