如何在行和列中排列对象并在.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. 使用quickdraw和svgwrite绘制单个鸭子的基本脚本
3. 画鸭子网格的脚本

我们的想法是，如果任何步骤失败，隔离调试/修复将更容易。

我怀疑你可能还需要计算出每个鸭子的尺寸/边界框，并缩放/对齐到网格的相同大小的矩形，然后偏移每条线的坐标。理论上，你可以把每只鸭子画成一组，然后简单地用SVG翻译每一组，使其排列成一个网格(而不是所有鸭子重叠(

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

如果你不局限于Python，并且对一些JavaScript很熟悉，那么QuickDraw数据集README已经包含了一个指向d3.js SVG演示的链接