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 ,保存下代码即可。

插件使用效果:

至此,核心代码已经介绍完毕。你可以自己动手试试~

(0)

相关推荐