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

标签 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") {
                }
            }
        };
});

但这不起作用,如何创建它?

最佳答案

我一直在考虑同一件事,但是我认为我要采取的方法是通过ID来选择路径的下拉列表。

然后按ID引用路径

这些天之一,我什至可以做。

关于javascript - 如何在svg-edit中创建曲线文本的扩展名?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28989361/

相关文章:

javascript - 在D3中,如何使用SVG文件作为DOM对象,绑定(bind)数据和路径仍然暴露?

javascript - 将 Raphael 库集成到 SVG-edit 中。兼容性问题?

javascript - 如何在es6中过滤嵌套对象并返回父对象

javascript - 将箭头颜色与 D3 中的线条颜色匹配

html - 对齐 SVG 圆下方的文本中心?

javascript - svg中的鼠标滚轮缩放效果-移动到中心点并在到达极限时停止缩放

javascript - 在可编辑网格中,如何使Ext组合框在选择项目时立即结束编辑模式?

javascript - 变量不会改变 Angular Controller 中的值

javascript - Trello 如何实时重新加载看板?