在画布中使用 svg 对象而不是光栅图像对象答案

【问题标题】：Use svg objects instead of raste image object in canvas在画布中使用 svg 对象而不是光栅图像对象
【发布时间】：2015-02-02 04:24:13
【问题描述】：

我正在尝试使用 JavaScript 和画布创建像 this 这样的应用程序。

我使用 kineticjs 作为画布库创建了一个草稿。牙齿都是png图片，线条是由动力学js使用Line对象绘制的。

我的一个朋友建议我将所有内容绘制为一个大的 svg（牙齿和线条），其中每个牙齿和线条都是另一条独特的路径，将其加载到画布上，并使用不同的 id 并使用 id 对其进行操作。

我尝试阅读 kineticjs 文档和 fabricjs 对象，但没有找到类似的内容。我的意思是使用fabricjs或kineticjs将svg存储并加载到画布上。然后库应该解析它并在画布上创建我可以通过 id 操作它们的 svg。

有可能吗？我对这个 svg 图形很陌生。有没有可能是我的想法？

我目前正在使用 KineticJS 将牙齿作为图像加载

Periodontogram.prototype.initializeImageObjects = function (){
    var obj = this;
    if (this.DEBUG){
        console.log("initializing ImageObjects:")
    }
    var check = function (item){return item !== undefined;}
    var url = this.options.url; 
    var imageObj;
    var image;

    this.options.imageFilenames.forEach(function (filename, index){
        if (obj.DEBUG){
            console.log("Loading "+filename+" image");
        }
        var src = url+'/'+filename;
        imageObj = new Image();
        imageObj.src  = src;
        imageObj.onload = function (){
            if (obj.DEBUG){
                console.log("Image "+src+" successfully loaded");
            }
            image = new Kinetic.Image({
                x:0,
                y:0,
                id: filename.split('.')[0],
                width: this.width,
                height: this.height,
                image:this
            });
            obj.imageObjects[index] = this;
            obj.teethImages[index] = image;
            if (obj.imageObjects.filter(check).length === obj.options.imageFilenames.length )    {
                if (obj.DEBUG){
                    console.log("All Images loaded successfully");
                    console.log("ready to call rest methods")
                }
                obj.positionImages();
                obj.createLineGroups();
                obj.createLabelGroups()
                obj.createStage();
                obj.drawOnScreen();
                $("#"+obj.container).width(obj.stage.getWidth());
                $("#"+obj.container).height(obj.stage.getHeight ());
                obj.callback();
                $.event.trigger({
                    type:'finishLoading',
                    obj: obj
                });

            }

        };

    });

}

我希望通过加载由牙齿和线条组成的整个 svg 来替换所有这些。

【问题讨论】：

你做了什么，你能把代码分享给我们吗？
目前我使用 KineticJs 并将所有内容加载为 png 图像，使用 Kinetic.Image 作为牙齿，使用 Kinetic.Line 作为水平平行线。我在任何地方都找不到如何使用 svg Image 和使用 KineticJS 或 Fabric 操作 svg 的部分内容。现在有很多代码。我可以举一些我如何加载图像的例子。

标签： javascript svg kineticjs fabricjs

【解决方案1】：

FabricJS 会将现有的单个 SVG URL/字符串转换、分解和重构为 Fabric.PathGroup。然后您可以使用mySvgGroup.getObjects() 来获取您可以根据需要操作的各个牙齿路径。

http://fabricjs.com/fabric-intro-part-3/#deserialization

KineticJS 将接受单个 SVG 牙齿的路径数据并将其显示在画布上。

http://kineticjs.com/docs/Kinetic.Path.html

不过，为每颗牙齿创建单独的 SVG 路径并将这些单独的 SVG 输入 KineticJS 或 FabricJS 可能更灵活。

然后您可以根据需要通过 id 操作它们：

使用 [x,y] 坐标放置每颗牙齿，
在不像素化的情况下调整大小，
将每颗牙齿放在一个组中，并在牙齿上进行注释/绘图，

【讨论】：