Question

我正在尝试翻译和旋转文字，这似乎是在严重扰乱我的文字。我在这里有一个例子。 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

问题似乎也发生在旋转上。有注释掉的部分只是翻译和旋转，所以有测试的上下文。

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

由于

Answer 1

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

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

该文件应该调用registerFont来注册Raphael（而不是Cufon）。

您现在必须使用print代替text。您不应该像设置本机或Google Web字体（它们是打印功能的参数）那样设置font-family，font-size和letter-spacing。注意：设置attr值与print不同，而不是文本（print是'set'路径）。

另请注意，打印与文本之间存在对齐差异。这可能会使轮换变得困难。

<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>

拉斐尔的旋转文字正在扰乱文字

1 个答案: