2

我最近开始了解 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) 没有缩放文本。

有没有办法缩放文本？

注意：文本的字体大小需要保持不变，即在我的情况下为 30 像素。

4

2 回答 2

5

有没有办法缩放文本？

演示

我检查了一下，它就像一个魅力

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-14T21:55:39.413 回答
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>
于 2013-09-16T18:13:24.007 回答