Question

让我试着解释......

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

我目前的代码：http://jsfiddle.net/ruPX5/

我使用了svg数据M70,70 A50,50 0 1,1 69,70来创建一个圆圈。如您所见，文本是弯曲的，但不在中心。

我尝试使用弧线，但我不知道如何用它创建一个完美的圆圈。即使我这样做，我也不知道如何将文本放在中心..

这可能吗？如果是这样，你会怎么做？

Answer 1

根据这个问题，Kinetic（没有一些黑客攻击）显然是不可能的。

How to center text along Kinetic.TextPath with kineticjs

Answer 2

远非完美，但现在必须要做

我正在使用旋转进行定位

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

请参阅http://jsfiddle.net/8kwJm/

Answer 3

还有一个你没有提到的解决方案。

如果使用二次曲线（有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.

这非常酷，并且当您从中心输出时，文本路径会扩展。始终保持效果为中心＆＃39;。

效果是什么＆＃39;意思？

这意味着，您可以将3个点定义为“左下角”和“左下角”。＆＃39;中间＆＃39; ＆＃39;右上角＆＃39;要么... ＆＃39;左下方＆＃39;，中间＆＃39;，＆＃39;右下方＆＃39;要么＆＃39;左上角＆＃39;，中间＆＃39;，右下角

或者其他什么，无论你如何定义路径，模式都不会丢失。

使用Kinetic.js绘制以曲线svg为中心的文本

3 个答案: