专栏首页MixLab科技+设计实验室DIY一个Sketch插件,生成猫猫狗狗的全家福

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 关于文件及文件夹的相关操作

本文分享自微信公众号 - 科技Mix设计Lab(Design-AI-Lab),作者:shadow

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2018-02-12

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 全民刷军装背后的AI技术及简单实现

    昨天有Design-AI-Lab用户后台留言,问为什么换军装的h5这么火,但没见到有技术文章分析如何实现。 我回复说,大概是比较简单吧,主要工作是图像合成。 ...

    mixlab
  • 如何用代码控制浏览器下载知乎大v的粉丝数据?

    欢迎用户在后台留言需解答的问题, mixlab 将会不定期的从中选择提供解决方案。同时 mixlab 微信群已经汇集了机器学习、自然语言处理、前端、后端、产品经...

    mixlab
  • 02技能之谷歌Chrome爬虫 |数据爬取及可视化系列

    今天更新一篇《数据爬取及可视化系列》的技能相关的文章:爬虫技能。 前阵子研究了nodejs爬虫相关的内容,发现最好用的还是casperjs,一个基于Phanto...

    mixlab
  • 批量导出某个简书用户的所有文章列表和文章超链接

    虽然简书提供了批量下载文章的功能,但是下载到本地的文章都是markdown格式的,不包含文章的链接,这不满足我的需求。

    Jerry Wang
  • linux 磁盘占满 查看占用

    参考https://blog.csdn.net/ithomer/article/details/89530790 查看某个目录的文件大小并排序(单位为MB)....

    平凡的学生族
  • PHP var关键字相关原理及使用实例解析

    其实我经过测试,认为var就是public的别名,是用在类中定义公有属性的,只不过历史问题,现在不用var了。后来查了查php官网,果然如此。

    砸漏
  • 纯粹依靠位操作实现整数加法运算

    Jerry Wang
  • 基于 H5与WebGL 的科幻风机 3D 展示

      许多世纪以来,风力机同水力机械一样,作为动力源替代人力、畜力,对生产力的发展发挥过重要作用。近代机电动力的广泛应用以及二十世纪50年代中东油田的发现,使风机...

    HT for Web
  • 基于 HTML5 WebGL 的 3D 科幻风机

      许多世纪以来,风力机同水力机械一样,作为动力源替代人力、畜力,对生产力的发展发挥过重要作用。近代机电动力的广泛应用以及二十世纪50年代中东油田的发现,使风机...

    HT for Web
  • Nodejs进阶:Express常用中间件body-parser实现解析

    body-parser是非常常用的一个express中间件,作用是对post请求的请求体进行解析。使用非常简单,以下两行代码已经覆盖了大部分的使用场景。

    IMWeb前端团队

扫码关注云+社区

领取腾讯云代金券