Как достичь верхнего индекса на rapahel тексте

Question

Как достичь верхнего индекса на rapahel тексте Когда пользователь вводит в текстовом поле, я получаю его значение и обновление текста Raphael с помощью rapaheltext.attr({text:textarea.value}) теперь, если типов кто-нибудь-^ п хотят быть как 2ⁿ в тексте rapahel, как мудрый для всех алфавитов, это 2^x, 2^o и т. Д.

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 с абсолютным позиционированием и установить его положение в середине, т.е. Raphael.rect(). Цель этого div состояла бы в том, чтобы действовать как Raphael.text().

Это дает нам возможность использовать innerHTML и установить текст внутри div с помощью HTML в <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"); 

(demo)

Вы также можете кормить Raphael элементы, сходные с DOM элемента. Текстовый элемент Рафаэля будет разделен на два tspan, если у нас есть символ \ n в тексте ввода.

Надеюсь, что эта помощь.