Question

我一直在考虑FabricJS和KineticJS作为我正在进行的项目的潜在解决方案，以及FabricJS对SVG的库级支持。然而，它缺乏缩放和平移功能让我想要更多。出于这个原因，我开始（再次）在KineticJS上寻找。

我在KineticJS文档中没有看到有关SVG支持的内容，我想知道是否有人可以告诉我KineticJS是否支持渲染SVG图像作为其框架的一部分。我认为就KineticJS而言，SVG只是另一个Image，因此应该在框架中对其进行处理。

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

Answer 1

正如您所怀疑的那样，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元素。

Answer 2

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

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

KineticJS是否有SVG的库支持？

2 个答案: