Используйте объекты SVG вместо растэ изображения на холсте

Question

Я пытаюсь создать такое приложение, используя JavaScript и canvas.

Я создал проект, используя kineticjs в качестве библиотеки холста. Зубы - это все изображения в формате png, а линии нарисованы кинетическими буквами с использованием объекта Line.

Мой друг предложил мне нарисовать все как один большой svg (зубы и линии), где каждый зуб и линия - это другой выделенный путь, загрузить его на холст с выделенными идентификаторами и манипулировать ими, используя идентификаторы.

Я попытался прочитать документацию kineticjs и объект fabricjs, но не нашел ничего подобного. Я имею в виду сохранение svg и загрузка его на холст с использованием fabricjs или kineticjs. Затем библиотека должна разобрать его и создать svg on canvas, которым я могу управлять с помощью идентификаторов.

Это вообще возможно? Я очень новичок в этой графике 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, состоящего из зубов и линий.

Answer 1

FabricJS преобразует, декомпозирует и перекомпоновывает существующий одиночный URL/ строку SVG в Fabric.PathGroup. Тогда вы можете использовать mySvgGroup.getObjects() чтобы выбрать отдельные зубные пути, которыми вы можете манипулировать по желанию.

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

KineticJS примет данные пути отдельного зуба SVG и отобразит их на холсте.

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

Тем не менее, возможно, более гибко создавать отдельные пути SVG для каждого зуба и подавать эти отдельные SVG в KineticJS или FabricJS.

Тогда вы можете манипулировать ими с помощью идентификаторов, как вы хотите:

• Поместите каждый отдельный зуб, используя координаты [x,y],
• Изменение размера без пикселизации,
• Поместите каждый зуб в группу и сделайте аннотации / рисунки на зуб,