Как масштабировать текст, используя Raphael.js

Недавно я узнал о Raphael.js, и я пытался сделать некоторые руки. Я хотел бы масштабировать текст, но он не работает. После многого поиска в Google я не нашел никакой идеи.Как масштабировать текст, используя Raphael.js

Кодекс:

var paper = Raphael("paper1", 1000,1000); 

var txt = paper.text(20,50,"Hello World").attr({ 
"font-family":"Arial","font-size":"30px", "font-weight": "normal", 
fill: "#000000", stroke:"black", "stroke-width": "0px", 
"text-anchor" : "start" , "font-style": "normal"});

флип работает на txt.scale (-1,1) но txt.scale (2,1) не масштабирование текста.

Есть ли способ масштабирования текста?

Примечание: Размер шрифта текста должен оставаться таким же, как и 30px в моем случае.

источник

2013-09-13 Gourab Dalal

Есть ли способ масштабирования текста?

DEMO

Я проверил, и он работает как шарм

var r = Raphael('test'); 

var t = r.text(200, 100, "I am a text").attr({fill:'red', 'font-size':30}); 

$('#zoomin').click(function() { 
    t.scale(2); 
}); 

$('#zoomout').click(function() { 
    t.scale(.5); 
});

источник

2013-09-14 21:55:39 Brian

Большое спасибо A.S. Рома для вашего ответа и демонстрации. Но на самом деле размер шрифта текста меняется здесь. –

Гураб, я думаю, что ваш вопрос, возможно, не был сформулирован очень четко - А.С. сделал то, что я сделал бы, исходя из предположения, что масштабирование подразумевает изменение кажущегося размера шрифта. Ваш собственный ответ ниже не совсем разъясняет, что вы пытаетесь сделать. –

У меня был раздел примечаний с моим вопросом «Примечание. Размер шрифта текста должен оставаться таким же, как и 30px в моем случае». –

Если масштабировать текст только тогда размер шрифта должен быть изменен. Нам нужно преобразовать текст в изображение, и нам нужно его масштабировать. Для этого я использовал скрытый холст.

Следующий код работает для меня.

<canvas id='textCanvas' style="display:none"></canvas> 

<script> 
    var paper = Raphael("paper1", 1000,1000); 
    var img = paper.image(getTxtImg("Hello World","italic","bold","15px","arial", 
             "#000000",130,35),20,28,300,80) 

    img.scale(2,1) //Double in width 
    img.scale(.5,1) //Half in width 

function getTxtImg(txt,style,weight,fontsize,fontfamily,color,w,h) 
{ 
    var tCtx = document.getElementById('textCanvas').getContext('2d'); 
    tCtx.canvas.width = w; 
    tCtx.canvas.height = h ; 
    var fontstr = "" + style + " " + weight + " " + fontsize + " " + fontfamily + " "; 
    tCtx.font = fontstr 
    tCtx.fillStyle = color 
    tCtx.fillText(txt, 0, h); 
    return tCtx.canvas.toDataURL(); 
} 
</script>

источник

2013-09-16 18:13:24

Как масштабировать текст, используя Raphael.js

ответ

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