使用 QML 绘制 SVG答案

【问题标题】：Draw SVG using QML使用 QML 绘制 SVG
【发布时间】：2018-03-17 17:27:24
【问题描述】：

如何用qml简单的文字画出SVG？

根据 QtDocs，可以使用以下代码绘制 SVG：

Path {
    startX: 50; startY: 50
    PathSvg { path: "L 150 50 L 100 150 z" }
}

但实际上并没有。那么，如何绘制 SVG？

【问题讨论】：

仔细阅读文档有助于解决很多问题。例如Path 的文档说： 注意：路径是非可视类型；它不会自行显示任何内容。要绘制路径，请使用 Shape
@folibis 但这只是路径，不是 SVG 路径，而且您知道 SVG 代表什么 - 可缩放矢量图形，而不是数据；)
当然，但据我了解，TC 想要Path，所以我只是为他指出了正确的方式:) 至于我，我会改用Image。

标签： qt qml

【解决方案1】：

如果要显示路径，必须在Shape 中使用它：

Shape {
    ShapePath {
        fillColor: "red"
        strokeWidth: 2
        strokeColor: "blue"
        startX: 50; startY: 50
        PathSvg { path: "L 150 50 L 100 150 z" }
    }
}

【讨论】：

【解决方案2】：

文档中没有任何关于绘图的内容。它使用 SVG 路径语法表示“定义路径”。

绘制它是一个不同的步骤：

Canvas {
    width: 400; height: 200
    contextType: "2d"

    onPaint: {
        context.strokeStyle = Qt.rgba(.4,.6,.8)
        context.path = yourPath
        context.stroke()
    }
}

请注意，只要 Qt 编译时支持 SVG，您就可以直接使用 .svg 文件作为图像源。

【讨论】：