我最近了解了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。
答案 0 :(得分:3)
有没有办法缩放文字?
<强> 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);
});
答案 1 :(得分:0)
如果我们仅缩放文本,则应更改字体大小。 我们需要将文本转换为图像,我们需要对其进行缩放。 为此,我使用了一个隐藏的画布。
以下代码适合我。
<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>