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)

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

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Golang语言社区

H5一二事 - 要饭的

先回顾一下WEB技术的几个阶段 那么H5肯定不是多了一些标签就完事了,H5也跟酷炫没什么关系,那是CSS3的事情,它更多的职责是功能,而不是外观,是JavaSc...

3078
来自专栏落影的专栏

如何快速定位、分析、解决非Crash的BUG(iOS 11篇)

前言 众所周知,Bug是线上应用极力规避但又无法避免的。对于致命的Bug,我们可以通过Crash日志进行分析;对于无法复现的Bug、特定操作步骤引起的Bug、某...

4295
来自专栏飞雪无情的博客

Android设计应用图标不用愁---Asset Studio Integration来帮你

Android Asset StudioWeb版是一个非常好用的Andrid图标资源设计工具,它是由RomanNurik开发的。现在我们已经在ADT14里支持同...

1135
来自专栏菩提树下的杨过

额的神啊:AS3中Button被disable了,也会触发Click事件!

btnTest.addEventListener(MouseEvent.CLICK,btnTestClick); function btnTestClick(...

3077
来自专栏全栈

前端工程化(三)---Vue的开发模式

1583
来自专栏DeveWork

将你的网站打造成一个iOS Web App

最近在做一个手机主题,据说借用类似 link href="xx.png" rel="nofollow" rel="nofollow" rel="apple-to...

3346
来自专栏安富莱嵌入式技术分享

emWin实现ATM机界面设计,含uCOS-III和FreeRTOS两个版本

第1期:ATM机 配套例子: V6-900_STemWin提高篇实验_ATM机(uCOS-III) V6-901_STemWin提高篇实验_ATM机(FreeR...

1081
来自专栏前端架构与工程

【翻译】浏览器渲染Rendering那些事:repaint、reflow/relayout、restyle

原文链接:http://www.phpied.com/rendering-repaint-reflowrelayout-restyle/ 有没有被标题中的5个“...

2226
来自专栏守候书阁

vue组件开发练习--焦点图切换

vue用了有一段时间了,开发的后台管理系统也趋于完善,现在时间比较算是有点空闲吧!这个空闲时间我在研究vue的另外的一些玩法,比如组件,插件等。今天,我就分享一...

2361
来自专栏雪胖纸的玩蛇日常

Vue+koa2开发一款全栈小程序(3.vue入门、Mpvue入门)

还有选最后一条时,让你选npm、yarn、No,I can handle it myselft,要选第三个No,I can handle it myselft,...

2223

扫码关注云+社区

领取腾讯云代金券