canvas - Dart 从 Canvas 上的 SVG 文件中绘制 ID

Question

我想加载一个 svg，通过 id 提取一个组，然后将其绘制到 Canvas 上。

如果文件是图片我会这样做:

_image = new html.ImageElement()
        ..src = src;
_canvas.context2D.drawImageScaledFromSource(_image, ox, oy, ow, oh, x, y, w, h)

我想做同样的事情，但使用 svg 文件，我想从 svg 文件中选择要绘制的 id。使用多个 id 绘制到 Canvas 的不同部分。

现在我有:

var groupToDraw;
HttpRequest.getString("img.svg").then((text) {
    svg.SvgElement pimage = new svg.SvgElement(text);
    groupToDraw = pimage.querySelector("#ID");
}

但我不确定如何在屏幕上绘制这个元素。还有一些组引用了文件其他部分的模式，尽管我现在可以跳过它们。

如果在 pyQt 中这样做有帮助，我会这样做:

renderer = QSvgRenderer(path)
pix = QtGui.QPixmap(width, height)
pix.fill(Qt.transparent)
painter = QtGui.QPainter(pix)
renderer.render(painter, id)

Answer 1

如果您从文件中加载一些 svg 文本并从该字符串创建一个 SvgElement，您将能够在元素上看到 ID:

var fileID;
HttpRequest.getString('file.svg').then((text) {
  svg.SvgElement temp = new svg.SvgElement.svg(text);
  fileID = temp.id;
});  

然后，您可以通过查询组的 ID 创建一个组元素，用字符串中的 SVG 标记包围 GElement，从该字符串创建一个 blob，从该 blob 创建一个 URL，然后从 URL 创建一个 ImageElement 并绘制图像在 Canvas 上:

svg.GElement g = temp.querySelector("#id2");

var str = '<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="32px"   
  height="32px" viewBox="0 0 32 32">${g.innerHtml}</svg>';

var blob = new Blob([str], "image/svg+xml;charset=utf-8");
var url = Url.createObjectUrlFromBlob(blob);

img = new ImageElement(src: url)
    ..onLoad.listen((Event e) { ctx.drawImage(img, 0, 0); });