jquery - 如何在 rapahel 文本上实现上标

Answer 1

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

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

在 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具有绝对定位的空并将其位置设置为 ie 的中间Raphael.rect()。这个 div 的目的是表现得像Raphael.text().

这使我们能够通过使用HTML和标签innerHTML来使用和设置其中的文本。div<sup><sub>

祝你好运

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 。

希望这有帮助。