Вращающийся текст в Рафаэле скремблирует текст

Я пытаюсь перевести и повернуть текст, и это, похоже, сильно скрещивает мой текст. У меня есть пример здесь. http://jsfiddle.net/WAbZz/Вращающийся текст в Рафаэле скремблирует текст

var paper = Raphael("ocular", 500, 500); 
var label = paper.text(100, 100, "Coeur et Artères"); 
label.attr('fill', '#555'); 
label.attr('font-size', '12px'); 
label.attr('cursor', 'pointer'); 

//label.transform("t200,200");// translate only 
//label.transform("r98");// rotate only 
label.transform("t200,200r98");// translate and rotate

Проблема, кажется, происходит на просто повернется. Есть раздел с комментариями, чтобы просто перевести и просто повернуть, поэтому при тестировании есть контекст.

Я делаю что-то не так, или я должен использовать другой метод для перевода и преобразования?

Thanks

источник

2013-02-25 JoshLfive

Похоже, что он работает должным образом. Какое поведение вы ожидали/нуждались? Не забывайте, что вы можете указать, в какой точке вы хотите, чтобы директива rotate вращается вокруг - то есть «r98,0,0» будет давать разные результаты, чем «r98,200,200». –

Интервал и нижнее выравнивание не соответствуют друг другу. Я обновил скрипку. http://jsfiddle.net/WAbZz/1/ вы можете видеть, как выглядит горизонтальная метка. но вращение его беспорядочно с интервалом и выравниванием. – JoshLfive

Я столкнулся с этой точной проблемой. К сожалению, у вас есть cufonize конкретный шрифт, создавая проприетарную версию JavaScript (можно сделать here) - обязательно выберите для Рафаэля.

Обязательно свяжите файл jf шрифта cufon после файла javascript Raphael. Эти файлы могут быть довольно большими. Включите только глифы, которые вы собираетесь использовать, и убедитесь, что gzip включен на вашем веб-сервере.

Файл должен звонить по телефону registerFont, чтобы зарегистрировать его с помощью Рафаэля (не Cufon).

Вы должны теперь использовать print вместо text. Вы больше не должны устанавливать шрифт-семейство, размер шрифта и расстояние между буквами, как и для родного или веб-шрифта Google (они являются параметрами функции печати). ПРИМЕЧАНИЕ. Установка значений attr отличается от печати, чем с текстом (печать - это «набор» путей).

Также обратите внимание, что различия в выравнивании с печатью и текстом. Это может затруднить вращение.

<script src="raphael.js"></script> 
<script src="my-cufon-font-file.js"></script> 

<div id="ocular"></div> 

<script> 

    var angle = 95; // degrees 

    var paper = Raphael("ocular", 500, 500); 
    paper.print(100, 100, "Coeur et Artères", paper.getFont('My Cufon Font Name'), 12, 'middle', '1') 
     .transform('R' + angle) 
     .attr({ 
      fill: '#555', 
      cursor: 'pointer' 
     }); 
</script>

источник

2013-08-22 16:36:48

Вращающийся текст в Рафаэле скремблирует текст

ответ

Смежные вопросы