PHP + CSS + Lettering.js創建曲線文本

Question

我正在使用lettering.js在字符串中的每個字母周圍包裝<span>元素。我正在使用PHP獲取字符串。在下面的例子中，$bellcurve還沒有定義 - 這個例子就是我想我可以找到解決方案的方法，但我不確定這是否是正確的方式（但這是問題）。

所以考慮到：

$string = "Hey!! Don't be an apple!" 

我要計數的字符在該字符串，然後爲每個角色，創建一個類聲明，如下圖所示，與「頂」每個值從而全面鐘形狀。

我的PHP知識使我這個遠：

$string = "Hey!! Don't be an apple!"; 
    $string = str_split($string); 
    $i = 1; 
    foreach($string as $char){ 
     echo '.char' . $i . '{top: ' . $bellcurve * $i . 'px}'; 
     $i++; 
    } 

例如，快試試這個手工做看起來是這樣的：

span.char1 {top: 20px} 
span.char2 {top: 18px} 
span.char3 {top: 16px} 
span.char4 {top: 15px} 
span.char5 {top: 14px} 
span.char6 {top: 13px} 
span.char7 {top: 12px} 
span.char8 {top: 11px} 
span.char9 {top: 10px} 
span.char10 {top: 10px} 
span.char11 {top: 10px} 
span.char12 {top: 9px} 
span.char13 {top: 9px} 
span.char14 {top: 10px} 
span.char15 {top: 10px} 
span.char16 {top: 10px} 
span.char17 {top: 11px} 
span.char18 {top: 12px} 
span.char19 {top: 13px} 
span.char20 {top: 14px} 
span.char21 {top: 15px} 
span.char22 {top: 16px} 
span.char23 {top: 18px} 
span.char24 {top: 20px} 

我需要知道如何做的是創造當乘以$ i（字符索引）時，係數（$bellcurve）將在遍歷字符總數時創建鐘形曲線。

或者如果有更好的方法，請讓我知道！

謝謝！

---

下面是答案轉換從javascript傳送給PHP：

<?php 
     $string = get('character_slogan'); 
     $string = str_split($string); 
     $count = count($string); 
     $pi = pi(); 
     $c = 1.0; 
     $b = $count/2; 
     $piece = sqrt(2*$pi); 
     $a = 1/($c*$piece); 
?> 

    <style type="text/css"> 

<?php 
    $x = 1; 
    foreach($string as $char){ 
     $E = M_E; 
     $bellcurve = ($a*$E)-(pow($x-$b, 2)/pow(2*$c, 2)); 
     echo '.char' . $x . '{top: ' . -$bellcurve . 'px} 
     '; 
     $x++; 
    } 
?> 
    </style> 

Answer 1

可以使用Gaussian function創建曲線類似於 「鐘形曲線」

我設置了A，B，C，像這樣：

a = 1/(1.0*(Math.sqrt(2*Math.PI))) // height of the curve's peak (1/(σ√(2π))) 
b = letterCount/2    // position of the center, b = μ (expected value) 
c = 1.0       // width of the "bell", c = σ (variance) 

然後迭代在span元素和top「bellPosition」像這樣

bellPosition = (a*Math.E)-(Math.pow(x-b, 2)/Math.pow(2*c, 2)) 

你可以玩這個（特別是C改變曲線的方差）

this example jsfiddle使用JavaScript的top樣式應用到span元素，應該是很容易轉化爲PHP。

Answer 2

我已經找到了這種解決方案非常迅速，使用str_split來拆分成詞字符，然後你可以用它來尋找位數：

crescentfreshpot在雅虎點com 27月 - 2005年02:50 中位數：

數中位數（數ARG1，ARG2號[，...號] ）

數中位數（數字陣列）

這個功能是從http://php.net/manual/en/ref.math.php和用戶crescentfreshpot在雅虎點com 27月 - 2005年02:50

Answer 3

我會詳細看看這個當我下班回家時。 現在，下面應該讓你開始：

添加以下屬性你的風格來定位字符：

<span style="display:inline-block; position:absolute; top:$Y; left:$x;">$z</span> 

增加$ X上水平線和增加/減少$顯示你的角色Y改變垂直位置。 要創建所需的鐘形，請每次增加/減少$ Y，增加/減少數字，具體取決於您是在詞語的中間位置之前還是之後。