如何在行和列中排列对象并在.svg中导出[关闭]

Posted 2023-03-28

【中文标题】如何在行和列中排列对象并在.svg中导出[关闭]

【英文标题】：How to arrange objects in rows and columns and export in .svg [closed]

【发布时间】：2022-01-19 20:45:28

【问题描述】：

我是 Python 新手，我正在尝试访问 Google 的 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_duckname_var.gif")

This is ideally what the outcome should look like 和 .svg 文件格式。

【问题讨论】：

对以下建议感到满意吗？

这实际上帮了大忙，谢谢乔治！我将它与我在其他地方找到的另一个 sn-p 结合起来，得到了令人满意的结果。

很高兴听到这个消息！做得很好！ If my answer was helpful feel free to vote up and if it was the solution to your problem mark it as such with the green check mark。如果您发布最终解决方案，可能会帮助其他用户将来面临同样的问题。玩得开心！

【参考方案1】：

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

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

有多个 Python 模块可以编写 SVG 文件：svgwrite 就是其中之一（docs、examples）。

基于示例sn-p：

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_duckname_var.gif")
# save svg of all ducks (grid)
dwg.save()
    

请记住，上面的代码未经测试，但希望它能说明这一点。如果您是该模块的新手，我建议您采用循序渐进的方法：

编写基本 svg 的基本测试脚本（例如示例 sn-p）：确保模块已正确安装并正常工作 使用 quickdraw 和 svgwrite 绘制单只鸭子的基本脚本 绘制鸭子网格的脚本

这个想法是，如果任何步骤失败，单独调试/修复会更容易。

我怀疑您可能还需要计算出每只鸭子的尺寸/边界框，并将网格缩放/对齐到相同大小的矩形，然后偏移每条线的坐标。从理论上讲，您可以将每只鸭子绘制为一个组，然后简单地 SVG 转换每个组，使其对齐为网格（而不是所有鸭子重叠）

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

如果您不仅限于 Python 并且对一些 javascript 感到满意，那么 QuickDraw 数据集 README 已经包含指向 d3.js SVG demo 的链接