在拉斐爾旋轉文本正在加擾文本

我正在嘗試做翻譯和旋轉文本，它似乎是擾亂我的文本很糟糕。我在這裏有一個例子。 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

在拉斐爾旋轉文本正在加擾文本

回答

相關問題