DIY一个Sketch插件，生成猫猫狗狗的全家福最近朋友圈都在玩的全家福：看了下是使用cocos2D引擎制作的，http

最近朋友圈都在玩的全家福：

看了下是使用 cocos2D 引擎制作的，

http://www.cocos.com/creator

主要是图片合成，利用前端的 canvas 即可生成。然后，随便看了下，发现图片素材还不错，于是拿来测试下新写的插件效果：

用来生成各种全家福的图片还不错～在测试下其他图片，这次是一堆的小狗（黑白的）：

点击放大寻找藏在里面的人

如何实现的？

读取本地的多张图片

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];   //isConfirmif (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}};

新建一个 MSArtboardGroup

此部分在《设计师编程指南之Sketch插件开发 2 》介绍过了，是我们每次生成的画布。其中 _artboardFrame 主要用于最后设置画布大小之用。

var _newArtboard = [MSArtboardGroup new];

_newArtboard.name = (new Date()).getTime().toString();var _artboardFrame =_newArtboard.frame();

生成每张图片的位置

这边用到了 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);

把图片绘制到 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);

};

保存成 sketch 插件

在 Run script 界面的左下角，有个 save ，保存下代码即可。