在KineticJS中加載SVG

我想加載SVG文件，並希望使用KineticJS（KJS）在畫布上顯示它，所以想知道是否有可能在其中顯示任意帶有隨機形狀和路徑的SVG文件使用KJS？在KineticJS中加載SVG

現在，通過不同軟件導出的SVG也有很大不同，比如說，通過Adobe Illustrator導出的SVG具有填充，描邊，筆畫寬度等。作爲屬性到它們各自的標籤，而SVG通過Inkscape擁有所有這些即是填充，筆劃，筆畫寬度等。作爲「樣式」屬性到其各自標籤的字符串值。

因此，我正在編寫自己的SVG解析器，特定於AI輸出的SVG格式，然後用它通過KJS在畫布上重新繪製SVG。但在這之前，我只是想檢查：

是否有任何工具可用在那裏，它可以轉換所有的原始（直線，矩形，圓形等）的標籤，標籤的路徑？即橢圓標記不是直接標記，而是轉換爲等效的路徑標記。
除了KJS之外，還有其他加載SVG到畫布上的方法嗎？

來源

2012-11-24 Pseudocode

我認爲fabric.js更適合您的項目http://fabricjs.com/它包含一個SVG到畫布解析器。 – Duopixel

不幸的是，您不能將drawImage SVG轉換成Canvas（test）。

但是你可以用canvg繪製SVG在自定義KineticJS形狀（test）：

var drawSvg = new Kinetic.Shape ({ 
    x: 10, y: 10, 
    drawFunc: function (canvas) { 
    canvas.getContext().drawSvg (svgSource, 0, 0, 25, 25) 
    } 
}); layer.add (drawSvg)

來源

2013-02-21 15:19:28 ArtemGr

'drawFunc：function（context）{ context.canvas._canvas.getContext（'2d'）。drawSvg（svgSource） context.fillStrokeShape（this）}' 我認爲api已經改變，第二行使它交互如點擊 – antpaw

其實這是可能的drawImage（）一個SVG到畫布（從ArtemGr代碼工作在FF和我的Chrome）。

但在Chrome中，您將遇到原始策略錯誤（存在https://bugs.webkit.org/show_bug.cgi?id=17352中報告的錯誤）。

我試着使用canvg與動能，但我發現兩個問題：

這是很慢啓用時動力學的聆聽;
如果您需要縮放圖像，則渲染質量非常差;

我找到的一個解決方案是使用fabricjs的SVG渲染，這被證明是非常優越的。代碼如下所示：

var fabricSvg; 
// uses the fabric SVG engine 
fabric.loadSVGFromUrl(svgSource, function(objects, opts) { 
    if (objects.length > 1) 
    fabricSvg = new fabric.PathGroup(objects, opts); 
    else 
    fabricSvg = objects; 

    fabricSvg.originX = 'left'; 
    fabricSvg.originY = 'top'; 

    var drawSvg = new Kinetic.Shape({ 
    x: 10, y: 10, 
    drawFunc: function(canvas) { 
     // use fabric SVG engine with Kinetic canvas context 
     fabricSvg.render(canvas.getContext()); 
    } 
    }); 
    layer.add(drawSvg); 
});

這樣，我們就可以使用動力學動畫引擎，具有比織物的更好的性能，和織物的SVG渲染模塊。

來源

2013-07-09 01:41:17 charlesschaefer

您的解決方案似乎非常好。任何想法如何使'drawHitFunc'work，所以我們可以拖/選擇它？ – zipp

Canvg很慢，但我沒有問題緩存它。感謝提及fabricjs。 – ArtemGr

在KineticJS中加載SVG

回答

相關問題