使用svgwrite绘制随机旋转三角形出现螺旋错乱问题

我尝试创建一个布满随机大小与旋转角度三角形的SVG画布，关闭旋转功能时生成的SVG符合预期，但开启旋转后图形完全失控，呈现螺旋错乱状态。

未旋转效果：

旋转后效果：

相关代码：

def create_triangle(size, rotation, color):
    triangle = svgwrite.shapes.Polygon(points=[
        (0, size), (size / 2, 0), (size, size),], fill=color)
    triangle.rotate(rotation, center=(size / 2, size / 2))
    return triangle

dwg = svgwrite.Drawing(size=(canvas_width, canvas_height), profile='tiny')
    
y = 0
x = 0
i = 0
    
for y in range(0, canvas_height, distance):
    i += 1
    rotation = random.uniform(0, rotation_range)
    random_size = random.uniform(min_size, size)
    tri = create_triangle(random_size, i, colors[i*2])
    tri.translate(x, y)
    dwg.add(tri)
    
dwg.save()

核心错误点 #

1. 旋转参数传递错误：调用create_triangle时，你把循环计数器i传给了rotation参数，而非生成的随机旋转值rotation，导致旋转角度随循环次数线性递增，直接造成螺旋错乱。
2. 变换顺序逻辑错误：SVG的变换执行顺序是从右到左，你先旋转三角形再平移，会让旋转后的三角形以画布原点为基准偏移，而非以(x,y)为锚点放置。

修复后的代码 #

def create_triangle(size, rotation, color):
    triangle = svgwrite.shapes.Polygon(points=[
        (0, size), (size / 2, 0), (size, size),], fill=color)
    # 先将三角形中心移到原点，旋转后再移回，确保旋转基于自身中心
    triangle.translate(size / 2, size / 2)
    triangle.rotate(rotation)
    triangle.translate(-size / 2, -size / 2)
    return triangle

dwg = svgwrite.Drawing(size=(canvas_width, canvas_height), profile='tiny')
    
x = 0
i = 0
    
for y in range(0, canvas_height, distance):
    i += 1
    rotation = random.uniform(0, rotation_range)
    random_size = random.uniform(min_size, size)
    # 传入随机生成的rotation，而非i；加取模避免颜色索引越界
    tri = create_triangle(random_size, rotation, colors[i*2 % len(colors)])
    tri.translate(x, y)
    dwg.add(tri)
    
dwg.save()

额外优化说明 #

• 新增colors[i*2 % len(colors)]，防止当i*2超出颜色列表长度时触发索引错误。
• 调整变换顺序后，三角形会先以自身中心完成旋转，再平移到目标位置(x,y)，保证布局符合预期。

内容的提问来源于stack exchange，提问作者NccWarp9