PyGame 应用程序中的 SVG 渲染。在 Pygame 2.0 之前,Pygame 不支持 SVG。那你是怎么加载的?

Posted

技术标签:

【中文标题】PyGame 应用程序中的 SVG 渲染。在 Pygame 2.0 之前,Pygame 不支持 SVG。那你是怎么加载的?【英文标题】:SVG rendering in a PyGame application. Prior to Pygame 2.0, Pygame did not support SVG. Then how did you load it? 【发布时间】:2010-09-12 08:16:26 【问题描述】:

在 pyGame 应用程序中,我想渲染 SVG 中描述的无分辨率 GUI 小部件。

我可以使用什么工具和/或库来实现这个目标?

(我喜欢OCEMP GUI 工具包,但它的渲染似乎依赖于位图)

【问题讨论】:

是否有适用于 2011 年的不同答案/库? (因为它已经 3 年了)。我见过 squirtle 用于加载在 inkscape 中创建的地图。 Squirtle 仍然不支持很多 SVG afaik 并且让它与 PyGame 一起运行可能还需要一些工作。找了好久Windows和64位Python下对SVG绘图的支持,我觉得只能放弃了。 时间流逝,新的可能性出现。请参阅下面的答案,但等等,还有更多! pynanosvg 有适用于 Windows 的二进制包! pynanosvg 不再受支持。我们需要更新的解决方案。 Pygame 2.0 版支持 SVG 文件。从版本 2.0.2 开始,SDL Image 支持 SVG (Scalable Vector Graphics) 文件(请参阅SDL_image 2.0)。因此,在 pygame 版本 2.0.1 中,SVG 文件可以通过pygame.image.load() 加载到pygame.Surface 对象中 【参考方案1】:

这是一个完整的例子,它结合了其他人的提示。 它应该从当前目录呈现一个名为 test.svg 的文件。它在 Ubuntu 10.10、python-cairo 1.8.8、python-pygame 1.9.1、python-rsvg 2.30.0 上进行了测试。

#!/usr/bin/python

import array
import math

import cairo
import pygame
import rsvg

WIDTH = 512
HEIGHT = 512

data = array.array('c', chr(0) * WIDTH * HEIGHT * 4)
surface = cairo.ImageSurface.create_for_data(
    data, cairo.FORMAT_ARGB32, WIDTH, HEIGHT, WIDTH * 4)

pygame.init()
window = pygame.display.set_mode((WIDTH, HEIGHT))
svg = rsvg.Handle(file="test.svg")
ctx = cairo.Context(surface)
svg.render_cairo(ctx)

screen = pygame.display.get_surface()
image = pygame.image.frombuffer(data.tostring(), (WIDTH, HEIGHT),"ARGB")
screen.blit(image, (0, 0)) 
pygame.display.flip() 

clock = pygame.time.Clock()
while True:
    clock.tick(15)
    for event in pygame.event.get():
        if event.type == pygame.QUIT:
            raise SystemExit

【讨论】:

有什么特别的理由不直接使用screen = pygame.display.set_mode((WIDTH, HEIGHT)) 而不是创建这个从未使用过的window 对象吗? TypeError: cannot use a str to initialize an array with typecode 'c' 您不再需要显式初始化数据数组。省略对 array.array 的调用,而是执行 surface = cairo.ImageSurface(cairo.FORMAT_ARGB32, width, height); buf = surface.get_data(); image = pygame.image.frombuffer(buf, (width, height), "ARGB").这将适用于 python3 和 python2。来源:pycairo.readthedocs.io/en/latest/integration.html 是的,我知道这是一个非常古老的问题,但它仍然在 pygame+cairo 的搜索结果中排名很高,因此值得保持更新。 pygame wiki 页面目前严重过时。 自版本 2 起,SDL Image 支持 SVG (Scalable Vector Graphics) 文件(请参阅 SDL_image 2.0)。因此,使用 pygame 版本 2.0.1,SVG 文件可以加载到带有pygame.image.load()pygame.Surface 对象中。【参考方案2】:

这个问题已经很老了,但是 10 年过去了,有一种新的可能性有效,不再需要 librsvg。有Cython wrapper over nanosvg library 并且有效:

from svg import Parser, Rasterizer


def load_svg(filename, surface, position, size=None):
    if size is None:
        w = surface.get_width()
        h = surface.get_height()
    else:
        w, h = size
    svg = Parser.parse_file(filename)
    rast = Rasterizer()
    buff = rast.rasterize(svg, w, h)
    image = pygame.image.frombuffer(buff, (w, h), 'ARGB')
    surface.blit(image, position)

我发现 Cairo/rsvg 解决方案太复杂而无法开始工作,因为依赖项很难安装。

【讨论】:

功能齐全,包罗万象->gist.github.com/zgoda/16c4bb767a085743251503471c1faeb1 看起来不错,但 nanosvg 不再维护:github.com/ethanhs/pynanosvg/commit/… 自版本 2 起,SDL Image 支持 SVG (Scalable Vector Graphics) 文件(请参阅 SDL_image 2.0)。因此,使用 pygame 版本 2.0.1,SVG 文件可以加载到带有pygame.image.load()pygame.Surface 对象中。【参考方案3】:

您可以使用Cairo(使用 PyCairo),它支持渲染 SVG。 PyGame 网页有一个 HOWTO 用于通过 Cairo 渲染到缓冲区中,并直接在 PyGame 中使用该缓冲区。

【讨论】:

自版本 2 起,SDL Image 支持 SVG (Scalable Vector Graphics) 文件(请参阅 SDL_image 2.0)。因此,使用 pygame 2.0.1 版,SVG 文件可以加载到带有pygame.image.load()pygame.Surface 对象中。【参考方案4】:

Pygame 2.0 版支持 SVG 文件。从版本 2.0.2 开始,SDL Image 支持 SVG (Scalable Vector Graphics) 文件(请参阅SDL_image 2.0)。因此,在 pygame 版本 2.0.1 中,SVG 文件可以通过pygame.image.load() 加载到pygame.Surface 对象中:

surface = pygame.image.load('my.svg')

在 Pygame 2 之前,您必须使用其他库实现 Scalable Vector Graphics 加载。以下是有关如何执行此操作的一些想法。


一个非常简单的解决方案是使用CairoSVG。使用cairosvg.svg2png功能,可以直接将Vector Graphics (SVG)文件转换为[Portable Network Graphics (PNG)]文件

安装CairoSVG。

pip install CairoSVG

编写一个将 SVF 文件转换为 PNG (ByteIO) 并创建 pygame.Surface 对象的函数可能如下所示:

import cairosvg
import io

def load_svg(filename):
    new_bites = cairosvg.svg2png(url = filename)
    byte_io = io.BytesIO(new_bites)
    return pygame.image.load(byte_io)

另见Load SVG


另一种方法是使用 svglib。但是,透明背景似乎存在问题。这个话题有问题How to make the png background transparent? #171。

安装svglib。

pip install svglib

解析和光栅化 SVG 文件并创建 pygame.Surface 对象的函数可能如下所示:

from svglib.svglib import svg2rlg
import io

def load_svg(filename):
    drawing = svg2rlg(filename)
    str = drawing.asString("png")
    byte_io = io.BytesIO(str)
    return pygame.image.load(byte_io)

另一个简单的解决方案是使用 pynanosvg。此解决方案的缺点是 nanosvg 不再受到积极支持,并且不适用于 Python 3.9。 pynanosvg 可用于加载和栅格化 Vector Graphics (SVG) 文件。安装Cython和pynanosvg:

pip install Cython
pip install pynanosvg

可以读取、光栅化 SVG 文件并将其加载到具有以下功能的 pygame.Surface 对象中:

from svg import Parser, Rasterizer

def load_svg(filename, scale=None, size=None, clip_from=None, fit_to=None, foramt='RGBA'):
    svg = Parser.parse_file(filename)
    scale = min((fit_to[0] / svg.width, fit_to[1] / svg.height)
                if fit_to else ([scale if scale else 1] * 2))
    width, height = size if size else (svg.width, svg.height)
    surf_size = round(width * scale), round(height * scale)
    buffer = Rasterizer().rasterize(svg, *surf_size, scale, *(clip_from if clip_from else 0, 0))
    return  pygame.image.frombuffer(buffer, surf_size, foramt)

小例子:

import cairosvg
import pygame
import io

def load_svg(filename):
    new_bites = cairosvg.svg2png(url = filename)
    byte_io = io.BytesIO(new_bites)
    return pygame.image.load(byte_io)

pygame.init()
window = pygame.display.set_mode((300, 300))
clock = pygame.time.Clock()

pygame_surface = load_svg('Ice-001.svg')
size = pygame_surface.get_size()
scale = min(window.get_width() / size[0], window.get_width() / size[1]) * 0.8
pygame_surface = pygame.transform.scale(pygame_surface, (round(size[0] * scale), round(size[1] * scale)))

run = True
while run:
    clock.tick(60)
    for event in pygame.event.get():
        if event.type == pygame.QUIT:
            run = False

    window.fill((127, 127, 127))
    window.blit(pygame_surface, pygame_surface.get_rect(center = window.get_rect().center))
    pygame.display.flip()

pygame.quit()
exit()

【讨论】:

【参考方案5】:

我意识到这并不能完全回答您的问题,但是有一个名为 Squirtle 的库将使用 Pyglet 或 PyOpenGL 呈现 SVG 文件。

【讨论】:

自版本 2 起,SDL Image 支持 SVG (Scalable Vector Graphics) 文件(请参阅 SDL_image 2.0)。因此,使用 pygame 版本 2.0.1,SVG 文件可以加载到带有pygame.image.load()pygame.Surface 对象中。【参考方案6】:

Cairo 无法开箱即用地渲染 SVG。 看来我们必须使用 librsvg。

刚刚找到那两个页面:

Rendering SVG with libRSVG,Python and c-types How to use librsvg from Python

这样的事情应该可以工作(将 test.svg 渲染到 test.png):

import cairo
import rsvg

WIDTH, HEIGHT  = 256, 256
surface = cairo.ImageSurface(cairo.FORMAT_ARGB32, WIDTH, HEIGHT)

ctx = cairo.Context (surface)

svg = rsvg.Handle(file="test.svg")
svg.render_cairo(ctx)

surface.write_to_png("test.png")

【讨论】:

Pygame 2.0 版支持 SVG 文件。从版本 2.0.2 开始,SDL Image 支持 SVG (Scalable Vector Graphics) 文件(请参阅SDL_image 2.0)。因此,在 pygame 版本 2.0.1 中,SVG 文件可以通过pygame.image.load() 加载到pygame.Surface 对象中:【参考方案7】:

pygamesvg 似乎可以做你想做的事(虽然我还没有尝试过)。

【讨论】:

该模块已被删除。下面列出的 cairo+rsvg 方法是更好的解决方案。 [免责声明:我在 3 年前快速写了 pygamesvg] 自版本 2 起,SDL Image 支持 SVG (Scalable Vector Graphics) 文件(请参阅 SDL_image 2.0)。因此,使用 pygame 版本 2.0.1,SVG 文件可以加载到带有pygame.image.load()pygame.Surface 对象中。【参考方案8】:

最后一条评论在我运行它时崩溃了,因为 svg.render_cairo() 期望的是 cairo 上下文而不是 cairo 表面。我创建并测试了以下函数,它似乎在我的系统上运行良好。

import array,cairo, pygame,rsvg

def loadsvg(filename,surface,position):
    WIDTH = surface.get_width()
    HEIGHT = surface.get_height()
    data = array.array('c', chr(0) * WIDTH * HEIGHT * 4)
    cairosurface = cairo.ImageSurface.create_for_data(data, cairo.FORMAT_ARGB32, WIDTH, HEIGHT, WIDTH * 4)
    svg = rsvg.Handle(filename)
    svg.render_cairo(cairo.Context(cairosurface))
    image = pygame.image.frombuffer(data.tostring(), (WIDTH, HEIGHT),"ARGB")
    surface.blit(image, position) 

WIDTH = 800
HEIGHT = 600
pygame.init()
window = pygame.display.set_mode((WIDTH, HEIGHT))
screen = pygame.display.get_surface()

loadsvg("test.svg",screen,(0,0))

pygame.display.flip() 

clock = pygame.time.Clock()
while True:
    clock.tick(15)
    event = pygame.event.get()
    for e in event:
        if e.type == 12:
            raise SystemExit

【讨论】:

Pygame 版本 2.0 支持 SVG 文件。从版本 2.0.2 开始,SDL Image 支持 SVG (Scalable Vector Graphics) 文件(请参阅SDL_image 2.0)。因此,使用 pygame 版本 2.0.1,SVG 文件可以加载到带有pygame.image.load()pygame.Surface 对象中:【参考方案9】:

根据其他答案,这是一个将 SVG 文件读入 pygame 图像的函数 - 包括校正颜色通道顺序和缩放:

def pygame_svg( svg_file, scale=1 ):
    svg = rsvg.Handle(file=svg_file)
    width, height= map(svg.get_property, ("width", "height"))
    width*=scale; height*=scale
    data = array.array('c', chr(0) * width * height * 4)
    surface = cairo.ImageSurface.create_for_data( data, cairo.FORMAT_ARGB32, width, height, width*4)
    ctx = cairo.Context(surface)
    ctx.scale(scale, scale)
    svg.render_cairo(ctx)

    #seemingly, cairo and pygame expect channels in a different order...
    #if colors/alpha are funny, mess with the next lines
    import numpy
    data= numpy.fromstring(data, dtype='uint8')
    data.shape= (height, width, 4)
    c= data.copy()
    data[::,::,0]=c[::,::,1]
    data[::,::,1]=c[::,::,0]
    data[::,::,2]=c[::,::,3]
    data[::,::,3]=c[::,::,2]

    image = pygame.image.frombuffer(data.tostring(), (width, height),"ARGB")
    return image

【讨论】:

Pygame 2.0 版支持 SVG 文件。从版本 2.0.2 开始,SDL Image 支持 SVG (Scalable Vector Graphics) 文件(请参阅SDL_image 2.0)。因此,在 pygame 版本 2.0.1 中,SVG 文件可以通过pygame.image.load() 加载到pygame.Surface 对象中:

以上是关于PyGame 应用程序中的 SVG 渲染。在 Pygame 2.0 之前,Pygame 不支持 SVG。那你是怎么加载的?的主要内容,如果未能解决你的问题,请参考以下文章

在pygame中的透明表面上渲染抗锯齿文本

在 Python Pygame 上显示 SVG(来自字符串)

在渲染之前获取 SVG 中的文本宽度

SVG 过滤器无法在 React 中渲染

Angular 2 SVG不渲染

使用 JSR-226 (Blackberry) 渲染存储在内存中的 SVG