如何将对象排列在行和列中，并在.svg中导出

Question

我是Python新手，我正在尝试访问谷歌的QuickDraw数据库，并根据用户输入的列和行排列大量图像(向量行)，然后以.svg文件格式导出。到目前为止，我只设法将每个图像保存为.gif并显示出来。我如何以3x3网格和.svg格式排列它们？

到目前为止，我得到的代码如下：

from PIL import Image, ImageDraw
from quickdraw.data import QuickDrawData

rows = int(input("How many rows do you want? "))
columns = int(input("How many columns do you want? "))
rows_columns = rows * columns
name_var = 0

for image in range(0,rows_columns):
    
    qd = QuickDrawData()
    duck = qd.get_drawing("duck")
    duck_image = Image.new("RGB", (255,255), color = (255,255,255))
    duck_drawing = ImageDraw.Draw(duck_image)

    for stroke in duck.strokes:

        for coordinate in range(len(stroke)-1):
            x1 = stroke[coordinate][0]
            y1 = stroke[coordinate][1]
            x2 = stroke[coordinate+1][0]
            y2 = stroke[coordinate+1][1]
            duck_drawing.line((x1,y1,x2,y2), fill=(0,0,0), width=2)

    duck_image.show()
    name_var += 1
    duck.image.save(f"my_duck{name_var}.gif")

理想情况下，结果应该是这样。和.svg文件格式。

Answer 1

您将需要一个可以输出SVG文件的python库。

不幸的是，我没有时间用刚刚运行的代码片段提供详细的答案，但希望我能提供一些指导。

有多个python模块可以编写SVG文件：svgwrite就是其中之一(文档，示例)。

基于示例片段：

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), fill='red'))
dwg.save()

你应该能够做这样的事情：

from PIL import Image, ImageDraw
from quickdraw.data import QuickDrawData
import svgwrite

dwg = svgwrite.Drawing('test.svg', profile='tiny')

rows = int(input("How many rows do you want? "))
columns = int(input("How many columns do you want? "))
rows_columns = rows * columns
name_var = 0

for image in range(0,rows_columns):
    
    qd = QuickDrawData()
    duck = qd.get_drawing("duck")
    duck_image = Image.new("RGB", (255,255), color = (255,255,255))
    duck_drawing = ImageDraw.Draw(duck_image)

    for stroke in duck.strokes:

        for coordinate in range(len(stroke)-1):
            x1 = stroke[coordinate][0]
            y1 = stroke[coordinate][1]
            x2 = stroke[coordinate+1][0]
            y2 = stroke[coordinate+1][1]
            duck_drawing.line((x1,y1,x2,y2), fill=(0,0,0), width=2)
            # you many need to offset dwg.line using row/col grid index and drawing size
            dwg.add(dwg.line((x1, y1), (x2, y2), stroke=svgwrite.rgb(10, 10, 16, '%')))

    duck_image.show()
    name_var += 1
    duck.image.save(f"my_duck{name_var}.gif")
# save svg of all ducks (grid)
dwg.save()

记住，上面的代码没有经过测试，但很有希望说明这一点。如果您是刚接触该模块的人，我建议一步一步的方法：

1. 编写基本svg的基本测试脚本(例如示例片段)：确保模块正确安装并工作
2. 使用快速绘图和svgwrite绘制单个鸭子的基本脚本
3. 绘制鸭子网格的脚本

这个想法是，如果任何步骤都失败了，那么在隔离状态下调试/修复就更容易了。

我怀疑您可能还需要计算出每个鸭子的尺寸/边框，并对齐网格大小相同的矩形，然后偏移每条线坐标。理论上，您可以将每个鸭子画成一个组，然后简单地将每个组转换成一个网格(而不是所有鸭重叠)。

此外，您可能会发现素描-rnn有趣，因为它使用快速绘制数据集。特别是查看David的草图-RNN Colab笔记本或他的草图-rnn/utils.py脚本。尽管QuickDraw笔画格式与草图-rnn笔画格式略有不同，但仍然有许多相似之处，上面的链接包括绘制svg网格的实用函数。他们需要适应QuickD劳的格式。

如果您不局限于Python，并且习惯于使用一些JavaScript，那么QuickDraw数据集自述已经包含到d3.js SVG演示的链接