一次超帅的代码生成设计

2018-01-29 10:35:19 浏览数 (1)

需求

昨天,我看到这个Badge的时候,我就在想我也会创建一个自己的Badge。

然后,我就可以这样到处粘贴:

看样子,我做的效果还是没有上面的好看,不过有些地方更炫。

需求分析

为了达到任意缩放的目的,我们就需要使用适量图片,即SVG。最开始的时候我从没想过用代码来生成,因为使用一些图形工具来创建是最简单的事情了。

原型设计

找了个工具先做了一个Demo:

想了想居然还有三个要做……。

接着看了看SVG的代码,然后我惊呆了:

就这么简单的代码,为什么不自己写呢!!

Coding

首先,我想到的是Python的PIL,然而它并不能做这样的事情!

接着,找到了一个名为SVGWrite的库,就开始写代码了~~。

时间很快就过去了。

我发现这样做起来太单调了,我就想加一点点趣味,比如: Idea风格应该是带蓝图的:

代码风格应该要是这样的:

不断地变更需求之后,我就展开和SVG的大作战了。

ShowCase

最后结果如下:

1. 点亮Idea蓝图风格:

2. 代码风格的works:

3. 没有设计好的Design:

4. 写作风格的article:

代码放在GitHub上: https://github.com/phodal/brand

在线地址:http://brand.phodal.com/

0 人点赞