QML Canvas中的SVG光栅化问题

Question

使用QML Canvas drawImage方法渲染SVG图标时遇到问题。 基本上，QML Canvas忽略光栅化大小并从原始大小（在本例中为48x48px）开始绘制图像，并使用难看的锯齿效果进行缩放。

有没有人见过这个并且可能找到解决方案？

请参阅QTBUG-59878以获取有用的自包含示例。 在这里，我将仅复制QML代码和我看到的屏幕截图。

从左边开始：

• 原始SVG图标为图像项目（正确）
• 由drawImage呈现的相同图像项（说实话我也希望这也是正确的，因为栅格化数据应该由Image提供）
• 使用documentation中解释的过程加载的SVG图标，带有loadImage和onImageLoaded

导入QtQuick 2.0

Rectangle
{
    width: 640
    height: 480

    Image
    {
        id: svgIcon
        source: "qrc:/qt_logo.svg"
        x: 10
        y: 100
        width: 180
        height: 200
        sourceSize: Qt.size(width, height)
    }

    Canvas
    {
        id: canvas
        anchors.fill: parent
        contextType: "2d"
        property string imagefile: "qrc:/qt_logo.svg"

        Component.onCompleted: context.loadImage(imagefile)

        onImageLoaded: requestPaint()

        onPaint:
        {
            context.drawImage(svgIcon, 200, 100, 180, 200)
            context.drawImage(imagefile, 400, 100, 180, 200)
        }
    }
}

Answer 1

我在QML中使用SVG，性能非常差，升级和降尺度的质量还不够好。如果您使用SVG显示图标，我建议您使用字体而不是svg图标，它非常快速和高品质。您可以将svg图标转换为字体字符，并将它们打包成单一字体并在QML中将其用作文本或标签元素，见Iconmoon.io