如何在rapahel文本上实现上标

Question

如何在rapahel文本上实现上标当用户在文本区域中键入时，我将获取其值，并使用rapaheltext.attr({text:textarea.value})更新拉斐尔文本现在，如果有人键入2^n，我想成为2ⁿ在rapahel文本上，所有字母都像wise一样，无论是2^x、2^o等

Answer 1

好吧，我做了一些研究，为拉斐尔的文本添加了上标和下标。。。但没有运气。Raphael.text()只获取字符串类型而不将html解释为字符串。

所以，我有不同的解决方案，效果很好。查看DEMO

在DEMO中，当您输入不带^和带^的文本时，您可以看到它是有效的。当然，这是一个简单的例子，所以您需要根据自己的喜好或应用程序调整代码。

var paper = new Raphael("canvas");
var r = paper.rect(75,10,150,80,5).attr({fill:'yellow'});
$('#btn').click(function() 
{
    var text = document.getElementById('ttt').value;
    var pos = text.indexOf('^');
    if (text.indexOf('^') > 0)
    {
        // we want to create superscript 
        var a = text.substring(0, pos);
        var b = text.substring(pos + 1);
        document.getElementById('text').innerHTML = a + '<sup>' + b + '</sup>';
    }
    else
    { 
        document.getElementById('text').innerHTML = text;    
    }
});

我所做的是创建一个具有绝对定位的空div，并将其位置设置为Raphael.rect()的中间。这个div的目的是像Raphael.text()一样工作。

这使我们能够使用innerHTML，并通过使用HTML的<sup>和<sub>标记设置div内部的文本。

祝你好运

Answer 2

我认为最简单的方法是使用两个文本元素。一个代表2，一个代表n。例如：

var paper = new Raphael("canvas");
var text = paper.text(10,20, "2");
var text2 = paper.text(10 + text.getBBox().width, 15, "n");

（演示）

您还可以提供类似于DOM元素的Raphael元素。如果输入文本中有\n字符，Raphael的文本元素将被拆分为两个tspan。

希望得到帮助。