Html 使用Kinetic.js在曲线svg上居中绘制文本

让我试着解释一下

我有一个随机字符串（长度可能不同），它必须绘制在曲线中。它也必须居中

我当前的代码：

我使用了这个svg数据

M70,70 A50,50 0 1,1 69,70

，它创建了一个圆。如您所见，文本是弯曲的，但不在中心

我尝试过使用圆弧，但我不知道如何用它创建一个完美的圆。即使我这样做了，我也不知道如何把文本放在中间

---

这可能吗？如果是这样的话，你将如何处理这个问题？

根据这个问题，显然不可能使用动能（没有一些黑客攻击）

---

远非完美，但目前还必须如此

我用旋转来定位

textpath.rotate(-Math.round(textpath.getTextWidth()/2)-10);

---

请参见

您还没有提到另一种解决方案

如果使用二次曲线（具有3个点）定义曲线，则可以在中心原点处预设中心点，并动态向外推其他两点

这是我的文本更新功能

        var q = quad;

        var text = handwritingLayer.get('#textpath1')[0];
        text.destroy(); // bye bye

        var SVGdataString = 'M' + q.start.attrs.x + ',' + q.start.attrs.y + ' C' + q.start.attrs.x + ',' + q.start.attrs.y + ' ' + q.control.attrs.x + ',' + q.control.attrs.y + ' ' + q.end.attrs.x + ',' + q.end.attrs.y;   // get (updated) control point data 


       // create a new text path ( you have to each time you change the curve, because the curve is only created when you initially CREATE the text path, after that you cannot change it, thus the 'bye bye' above.

       var textpath = new Kinetic.TextPath({
            x: 0, 
            y: -50,
            id: 'textpath1',
            fill: '#333',
            fontSize: '48',
            fontFamily: 'just-another-hand',
            text: typedText,
            data: SVGdataString
        });

       var textWidth = Math.round(textpath.getTextWidth() );
       var offX =  textWidth  / 2 + 20; // need extra room for the cursor

       q.start.attrs.x = q.center - offX;
       q.control.attrs.x = q.center;
       q.end.attrs.x = q.center + offX;

        // rebuild everything
       // rebuildCircles( quad ); // creates lots of lag, only use if testing

       handwritingLayer.add(textpath);
       pixy.stage.draw();


// basically what this does is...
// every time you type a new Character...
// increase the text string. (typedText).
// calculate its width.
// divide by 2.
// move the left control point (center - width)
// move the right control point (center + width)
// redraw the text path.

这非常酷，可以使文本路径在键入时从中心向外扩展。 始终保持效果“居中”

“效果”是什么意思

这意味着，您可以将这3个点定义为“左下”“中”“右上”或。。。 “左下”、“中”、“右下”或 左上角、中间、右下角

---

无论你如何定义路径，模式都不会丢失。

在什么的中心——中心舞台？另外，当你要求“用它创建一个完美的圆”时，它意味着什么？在文本路径的中心。我的意思是，用一个“完美圆”，创造出与使用M70,70 A50,50 0 1,1 69,70时相同的形状，可能是我刚找到的那篇文章的复制品。。我应该在问之前找得更仔细些