1

我正在尝试翻译和旋转文本，它似乎对我的文本进行了非常严重的扰乱。我这里有一个例子。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

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

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

谢谢

4

1 回答 1

0

我遇到了这个确切的问题。不幸的是，您必须通过生成它的专有 JavaScript 版本来对特定字体进行cufonize（可以在此处完成） - 确保选择 Raphael。

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

该文件应该调用调用registerFont以将其注册到 Raphael（而不是 Cufon）。

您现在必须使用print而不是text。您不应再像设置原生或 Google Web 字体那样设置 font-family、font-size 和 letter-spacing（它们是 print 函数的参数）。注意：使用 print 设置 attr 值与使用 text 不同（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-22T16:36:48.287 回答