javascript - 拉斐尔JS :Text around path not visible

Question

我一直在使用 VectorEditorJS .将它用于 TShirt 设计 Web 应用程序。我添加了几行代码来增强一项功能，该功能可以让我通过围绕 path 弯曲文本来风格化文本。 .很多代码都是借用这个fiddle .

现在这段代码工作正常，直到我使用了来自 this feeds 的一些源代码来源，对text进行分组和 path在 <g> 里面标记。现在，当我触发代码使文本弯曲时，文本和路径就从 Canvas 上消失了。

不可见的渲染 SVG(您可以在浏览器中尝试):

<svg height="490" version="1.1" width="513" xmlns="http://www.w3.org/2000/svg" style="overflow: hidden; position: relative;"><desc style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">Created with Raphaël 2.1.2</desc><defs style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></defs><text x="50" y="50" text-anchor="middle" font="10px &quot;Arial&quot;" stroke="#4255ff" fill="#ff73a6" font-size="0px" font-family="Comic Sans MS " stroke-width="2" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-anchor: middle; font-style: normal; font-variant: normal; font-weight: normal; font-size: 0px; line-height: normal; font-family: 'Comic Sans MS';"><tspan dy="50" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">Text</tspan></text><g><path fill="none" stroke="#000000" d="M152.02796,220.79435C158.08887000000001,228.37049000000002,165.15994,235.44156,165.15994,235.44156L181.32238,245.54308L207.58635,253.6243L235.87062,258.16999L260.61936000000003,260.1903L287.38840000000005,258.67507L307.59145000000007,254.63446000000002L333.3503400000001,247.56339000000003L351.5330900000001,239.48217000000002L369.21076000000005,224.32988000000003" stroke-opacity="0" id="pathPF2116" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></path><text x="152.0323993235795" y="220.79989884025497" text-anchor="start" font="10px &quot;Arial&quot;" stroke="#4255ff" fill="#ff73a6" font-size="118px" stroke-width="3" font-family="Comic Sans MS " fill-opacity="1" stroke-opacity="1" transform="matrix(0.6247,0.7808,-0.7808,0.6247,0,0)" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-anchor: start; font-style: normal; font-variant: normal; font-weight: normal; font-size: 118px; line-height: normal; font-family: 'Comic Sans MS'; fill-opacity: 1; stroke-opacity: 1;"><tspan dy="220.79989884025497" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">P</tspan></text><text x="189.59641501815253" y="248.08893644399512" text-anchor="start" font="10px &quot;Arial&quot;" stroke="#4255ff" fill="#ff73a6" font-size="118px" stroke-width="3" font-family="Comic Sans MS " fill-opacity="1" stroke-opacity="1" transform="matrix(0.9558,0.2941,-0.2941,0.9558,0,0)" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-anchor: start; font-style: normal; font-variant: normal; font-weight: normal; font-size: 118px; line-height: normal; font-family: 'Comic Sans MS'; fill-opacity: 1; stroke-opacity: 1;"><tspan dy="248.08893644399512" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">o</tspan></text><text x="235.80833370414376" y="258.15997969419357" text-anchor="start" font="10px &quot;Arial&quot;" stroke="#4255ff" fill="#ff73a6" font-size="118px" stroke-width="3" font-family="Comic Sans MS " fill-opacity="1" stroke-opacity="1" transform="matrix(0.9873,0.1587,-0.1587,0.9873,0,0)" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-anchor: start; font-style: normal; font-variant: normal; font-weight: normal; font-size: 118px; line-height: normal; font-family: 'Comic Sans MS'; fill-opacity: 1; stroke-opacity: 1;"><tspan dy="258.15997969419357" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">p</tspan></text><text x="283.0874906136036" y="258.91851791331885" text-anchor="start" font="10px &quot;Arial&quot;" stroke="#4255ff" fill="#ff73a6" font-size="118px" stroke-width="3" font-family="Comic Sans MS " fill-opacity="1" stroke-opacity="1" transform="matrix(0.9984,-0.0565,0.0565,0.9984,0,0)" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-anchor: start; font-style: normal; font-variant: normal; font-weight: normal; font-size: 118px; line-height: normal; font-family: 'Comic Sans MS'; fill-opacity: 1; stroke-opacity: 1;"><tspan dy="258.91851791331885" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">p</tspan></text><text x="329.2829813479077" y="248.67992016663572" text-anchor="start" font="10px &quot;Arial&quot;" stroke="#4255ff" fill="#ff73a6" id="lpathPF2116" font-size="118px" stroke-width="3" font-family="Comic Sans MS " fill-opacity="1" stroke-opacity="1" transform="matrix(0.9643,-0.2647,0.2647,0.9643,0,0)" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-anchor: start; font-style: normal; font-variant: normal; font-weight: normal; font-size: 118px; line-height: normal; font-family: 'Comic Sans MS'; fill-opacity: 1; stroke-opacity: 1;"><tspan dy="248.67992016663572" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">y</tspan></text></g></svg>

Jsfiddle以上。

操纵可见文本绕特定路径弯曲的代码:

function manipulate(editorObj, selection,stylePath) {

    var localCopy = editorObj.selected[0]; //.clone(); 

    var _group = editorObj.draw.set();
    var path = editorObj.draw.path(stylePath).attr("stroke", "transparent"),
    message = localCopy[0].textContent,
    message_length = 0,
    letters = [],
    places = [],
    ratio,
    fontsize,
    letter,
    c = 0,
    p;

    _group.push(path);
    var dt = new Date();
    var dtStr=dt.getHours().toString() + dt.getSeconds().toString();
    var idOfNode = "pathPF"+dtStr;
    path.node.id = idOfNode;
    var group = document.createElementNS("svg", "g");

    //since not every letter is the same width, get the placement for each letter along the length of the string
    //however, Raphael appears to group the width of letters into intervals of 4px, so this won't be perfect        
   function Cr(el) {
       group.appendChild(el.node);
   }
   Cr(path);
    for (; c < message.length; c += 1) {
        letter = editorObj.draw.text(0, 0, message[c]).attr({ "text-anchor": "start" });
        Cr(letter);
        _group.push(letter);
        letters.push(letter);
        places.push(message_length);
        //spaces get a width of 0, so set min at 4px
        message_length += Math.max(4, letter.getBBox().width);
    }
    letter.node.id = "l" + idOfNode;


$("#l" + idOfNode).after("</g>");

ratio = path.getTotalLength() / message_length;
fontsize = 10 * ratio;

for (c = 0; c < letters.length; c += 1) {

    letters[c].attr("font-size", fontsize + "px");
    letters[c].attr("stroke-width", localCopy.attr("stroke-width"));
    letters[c].attr("font-family", localCopy.attr("font-family"));
    letters[c].attr("fill", localCopy.attr("fill"));
    letters[c].attr("stroke", localCopy.attr("stroke"));
    letters[c].attr("stroke-width", localCopy.attr("stroke-width"));
    letters[c].attr("fill-opacity", localCopy.attr("fill-opacity"));
    letters[c].attr("stroke-opacity", localCopy.attr("stroke-opacity"));
    // letters[c].attr("font-family", localCopy.attr("font-family"));
    p = path.getPointAtLength(places[c] * ratio);
    //there does appear to be a bug in p.alpha around 180. Here's the fix
    letters[c].attr({ x: p.x, y: p.y, transform: 'r' + (p.alpha < 180 ? p.alpha + 180 : p.alpha) });
}
var svgdoc = document.getElementsByTagName('svg')[0];
svgdoc.appendChild(group);

localCopy.remove();
editorObj.unselect();}

有人可以帮助我到达那里吗？

谢谢

Answer 1

我认为您的代码中有一些错误:

var group = document.createElementNS("svg", "g");

这应该是:

var group = document.createElementNS("http://www.w3.org/2000/svg", "g");

这对我来说完全是错误的:

$("#l" + idOfNode).after("</g>");

您永远不必像这样手动插入结束标记。