一次超帅的代码生成设计

需求

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

然后，我就可以这样到处粘贴：

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

需求分析

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

原型设计

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

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

接着看了看SVG的代码，然后我惊呆了：

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="1006px" height="150px" viewBox="0 0 1006 150" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: Sketch 3.7 (28169) - http://www.bohemiancoding.com/sketch -->
    <title>phodal</title>
    <desc>Created with Sketch.</desc>
    <defs></defs>
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <rect id="Rectangle-1" fill="#5E6772" style="mix-blend-mode: hue;" x="0" y="0" width="640" height="150"></rect>
        <rect id="Rectangle-1" fill="#2196F3" style="mix-blend-mode: hue;" x="640" y="0" width="366" height="150"></rect>
        <text id="PHODAL" font-family="Helvetica" font-size="120" font-weight="normal" fill="#FFFFFF">
            <tspan x="83" y="119">PHODAL</tspan>
        </text>
        <text id="idea" font-family="Helvetica" font-size="120" font-weight="normal" fill="#FFFFFF">
            <tspan x="704" y="122">idea</tspan>
        </text>
    </g>
</svg>

就这么简单的代码，为什么不自己写呢！！

Coding

SVG就是一个XML

可缩放矢量图形（Scalable Vector Graphics，SVG) ，是一种用来描述二维矢量图形的XML 标记语言。

要对这个XML进行修改也是一件很容易的事。只是，先找了PIL发现不支持，就找到了一个名为SVGWrite的工具。

A Python library to create SVG drawings.

示例代码如下:

import svgwrite

dwg = svgwrite.Drawing('test.svg', profile='tiny')
dwg.add(dwg.line((0, 0), (10, 0), stroke=svgwrite.rgb(10, 10, 16, '%')))
dwg.add(dwg.text('Test', insert=(0, 0.2)))
dwg.save()

然后我就照猫画虎地写了一个：

import svgwrite

dwg = svgwrite.Drawing('idea.svg', profile='full', size=(u'1006', u'150'))

shapes = dwg.add(dwg.g(id='shapes', fill='none'))
shapes.add(dwg.rect((0, 0), (640, 150), fill='#5E6772'))
shapes.add(dwg.rect((640, 0), (366, 150), fill='#2196F3'))
shapes.add(dwg.text('PHODAL', insert=(83, 119), fill='#FFFFFF',font_size=120, font_family='Helvetica'))
shapes.add(dwg.text('idea', insert=(704, 122), fill='#FFFFFF', font_size=120, font_family='Helvetica'))

dwg.save()

发现和上面的样式几乎是一样的，就顺手做了剩下的几个。然后想了想，我这样做都一样，一点都不好看。

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

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

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

示例代码

为了写上面的Idea的蓝图，我要画两种不同的矩形，他们有不同的粗细：

   def draw_for_bg_plus():
        for x in range(y_text_split + rect_length, width, rect_length):
            shapes.add(dwg.line((x, 0), (x, height), stroke='#EEEEEE', stroke_opacity=0.3))

        for y in range(rect_length, height, rect_length):
            shapes.add(dwg.line((y_text_split, y), (width, y), stroke='#EEEEEE', stroke_opacity=0.3))

        for x in range(y_text_split + max_rect_length, width, max_rect_length):
            for y in range(0, height, max_rect_length):
                shapes.add(dwg.line((x, y - 4), (x, y + 4), stroke='#EEEEEE', stroke_width='2', stroke_opacity=0.4))

        for y in range(0, height, max_rect_length):
            for x in range(y_text_split + max_rect_length, width, max_rect_length):
                shapes.add(dwg.line((x - 4, y), (x + 4, y), stroke='#EEEEEE', stroke_width='2', stroke_opacity=0.4))

生成对应的XML

        <line stroke="#EEEEEE" stroke-opacity="0.3" x1="529" x2="868" y1="60" y2="60"/>
        <line stroke="#EEEEEE" stroke-opacity="0.3" x1="529" x2="868" y1="70" y2="70"/>
        <line stroke="#EEEEEE" stroke-opacity="0.3" x1="529" x2="868" y1="80" y2="80"/>
        <line stroke="#EEEEEE" stroke-opacity="0.3" x1="529" x2="868" y1="90" y2="90"/>
        <line stroke="#EEEEEE" stroke-opacity="0.3" x1="529" x2="868" y1="100" y2="100"/>
        <line stroke="#EEEEEE" stroke-opacity="0.3" x1="529" x2="868" y1="110" y2="110"/>
        <line stroke="#EEEEEE" stroke-opacity="0.3" x1="529" x2="868" y1="120" y2="120"/>
        <line stroke="#EEEEEE" stroke-opacity="0.3" x1="529" x2="868" y1="130" y2="130"/>
        <line stroke="#EEEEEE" stroke-opacity="0.3" x1="529" x2="868" y1="140" y2="140"/>

同理于works，也可以生成对应的10，然后对其进行旋转

    for x in range(0, 300, 10):
        text = get_some_random10(100)
        shapes.add(
            dwg.text(text, insert=(phodal_width + 1, x), fill='#27ae60', font_size=12,
                     font_family='Inconsolata for Powerline',
                     opacity=0.3, transform="rotate(15 1000, 0)"))

生成

<text fill="#27ae60" font-family="Inconsolata for Powerline" font-size="12" opacity="0.3"
              transform="rotate(15 1000, 0)" x="529" y="220">
            100100011000111111111111110111111010011110110011001111011000111111101110100110110111111100101010110
        </text>