3

I want to use svg-edit plugin in my project. Now I want to create extension to curve texts like:

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

But it doesn't work, how can I create this?

slavoo
  • 5,798
  • 64
  • 37
  • 39
Rasool Ghafari
  • 4,128
  • 7
  • 44
  • 71
  • I've been thinking about the same thing, but I think the approach I would take is a drop-down list of paths to select from by id. Then reference the path by ID I might even do this one of these days. – theGleep Jul 25 '21 at 23:53
  • After revisiting this question, I had a new idea: +++ when a text and path are selected together, but are the only selection, show/enable a button for "place text on path". Add a few custom attributes/tags to mark that this is a text-on-path object, and save the original properties for "un-group" options. +++ when a "text-on-path" object is selected, change the icon to "separate text from path", which restores the original properties. (Future fixes might update these properties to include size and rotation changes to the grouped object, but let's save that for later, eh?) – theGleep Jul 26 '21 at 16:23

0 Answers0