Question

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

如果文件是图像，我会这样做：

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

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

现在我有：

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并绘制图像在画布上：

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); });

Dart从画布上的SVG文件中绘制id

1 个答案: