Dart從畫布上的SVG文件中繪製id

我想加載一個svg，通過id提取一個組，並將其繪製到畫布上。Dart從畫布上的SVG文件中繪製id

如果該文件是一個形象，我會做：

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

我想這樣做同樣的事情，但有一個SVG文件，我想挑選哪些ID從SVG文件來繪製。使用多個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)

來源

2013-11-24 Peter Hofmann

如果從文件加載一些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); });

來源

2013-11-25 19:55:27 ringstaff

我現在更接近了，謝謝。第一個代碼用於獲取SvgElement。我想只是從文件中抽出一個「」。我可以使用for循環或.querySelector（）來提取它，但是我不知道如何在畫布上繪製該元素。還有什麼提示？ –

我已更新我的答案以反映您更新的問題。 – ringstaff

Dart從畫布上的SVG文件中繪製id

回答

相關問題