如何在svg-edit中创建曲线文本的扩展名?

时间:2015-03-11 14:31:01

标签: javascript svg svg-edit image-editor

我想在我的项目中使用svg-edit插件。现在我想创建曲线文本的扩展名,如:

svgEditor.addExtension("Curve text!", function() {'use strict';
        return {
            name: "Curve text",
            svgicons: svgEditor.curConfig.extPath + "text_curve-icon.xml",

            buttons: [{
                id: "text_curve", 
                type: "mode", 
                title: "Curve the text", 
                events: {
                    'click': function() {
                        svgCanvas.setMode("text_curve");

                        var textElement = $(svgCanvas.getSelectedElems()[0]);

                        var textPath =  '<text>' +
                                        '   <textPath xlink:href="#relativeCurve">' +
                                            $(svgCanvas.getSelectedElems()[0]).text() +
                                        '   </textPath>' +
                                        '</text>';
                        $('#svgcontent').prepend('<defs><path d="m0,350c100,-100 200,-200 300,-200c100,0 200,200 300,200c100,0 200,-200 300,-200" id="relativeCurve"/></defs>');
                        $(textElement).replaceWith(textPath);
                    }
                }
            }],
            mouseDown: function() {
                if(svgCanvas.getMode() == "text_curve") {
                    return {started: true};
                }
            },

            mouseUp: function(opts) {
                if(svgCanvas.getMode() == "text_curve") {
                }
            }
        };
});

但它不起作用,我该如何创建呢?

1 个答案:

答案 0 :(得分:-1)

我一直在考虑同样的事情,但我认为我采取的方法是从id中选择的路径的下拉列表。

然后按ID

引用路径

我甚至可能会这样做。