在拉斐尔旋转文本正在加扰文本

我正在尝试做翻译和旋转文本，它似乎是扰乱我的文本很糟糕。我在这里有一个例子。 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

这个问题似乎也发生在刚旋转。有评论指出，只是翻译和只是旋转，所以有测试的上下文。

我做错了什么，或者我应该使用不同的方法来做翻译和转换？

谢谢

来源

2013-02-25 JoshLfive

这看起来像它的工作，因为它应该。你期望/需要什么行为？不要忘记，你可以指定你希望旋转指令旋转的点 - 即“r98,0,0”将产生与“r98,200,200”不同的结果。 – 2013-02-25 23:22:32

间距和底部对齐不一致。我更新了小提琴。 http://jsfiddle.net/WAbZz/1/ 你可以看到一个水平标签看起来不错。但旋转与间距和对齐混乱。 – JoshLfive 2013-02-27 13:44:15

我遇到了这个确切的问题。不幸的是，您必须通过生成专有的JavaScript版本（可以完成here）来确定为Raphael选择cufonize的特定字体。

确保在Raphael js文件后链接cufon字体js文件。这些文件可能很大。只包含您打算使用的字形，并确保在您的Web服务器中启用gzip。

该文件应该调用呼叫registerFont注册与Raphael（而不是Cufon）。您需要使用print而不是text。您应该不再像原生或Google Web字体那样设置font-family，font-size和letter-spacing（它们是打印函数的参数）。注意：设置attr值与打印不同的是文本（print是一组“路径”）。

另请注意，打印与文本有对齐差异。这可能会导致旋转困难。

<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

在拉斐尔旋转文本正在加扰文本

回答

相关问题