2

我一直将FabricJS和KineticJS视为我正在从事的项目的潜在解决方案，就像 FabricJS 对 SVG 的库级别支持一样。然而，它缺乏缩放和平移功能让我想要更多。出于这个原因，我开始（再次）关注 KineticJS。

我在 KineticJS 文档中没有看到太多关于 SVG 支持的内容，我想知道是否有人可以告诉我 KineticJS 是否支持渲染 SVG 图像作为其框架的一部分。我假设就 KineticJS 而言，SVG 只是另一个图像，因此应该在框架中这样对待。

此外，当我在网上搜索有关 SVG 和画布的文章时，我会看到讨论SVG 或 Canvas的页面和文章。我不认为这两者是相互排斥的。元素本身不<canvas>支持 SVG 吗？

4

2 回答 2

2

正如您所怀疑的，canvas 和 KineticJS 都将 SVG 视为另一个图像。

是的，canvas 元素可以使用它drawImage来绘制 svg 图像。

是的，您也可以将 SVG 图像加载到 kineticJS 中：

var stage = new Kinetic.Stage({
    container: 'container',
    width: 400,
    height: 400
});
var layer = new Kinetic.Layer();
stage.add(layer);

var img=new Image();
img.onload = function () {
    var image = new Kinetic.Image({
        image: img,
        x: 20,
        y: 20,
        width: 75,
        height: 75,
    });
    layer.add(image);
    layer.draw();

}
img.crossOrigin="anonymous";
img.src = "https://dl.dropboxusercontent.com/u/139992952/stackoverflow/rocket.svg";

另一方面，

FabricJS 对操作 SVG 元素有更多支持。

于 2013-07-10T22:32:40.610 回答
1

KineticJS 通过路径形状支持 SVG。这是一个教程：

http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-path-tutorial/

于 2013-07-16T17:00:54.683 回答