Question

我正在使用lettering.js在字符串中的每个字母周围包裹<span>个元素。我正在使用PHP获取字符串。在下面的示例中，$bellcurve尚未定义 - 示例是我想象可能让我找到解决方案的方法，但实际上我不确定这是否是正确的方法（但这是问题）。

因此：

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

我想计算该字符串中的字符，然后为每个字符创建一个类声明，如下所示，“top”的每个值都会产生整体钟形。

我的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}

我需要知道的是创建一个系数（$bellcurve），当乘以$ i（字符索引）时，将在迭代超过总字符数时创建一个钟形曲线。 / p>

或者如果有更好的方法，请告诉我！

谢谢！

以下是从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创建类似“钟形曲线”的曲线

enter image description here

我正在设置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 at yahoo dot com 27-Jul-2005 02:50 位数：

数字中位数（数字arg1，数字arg2 [，数字......]）

数字中位数（数组编号）

此函数来自http://php.net/manual/en/ref.math.php和用户crescentfreshpot at yahoo dot com 27-Jul-2005 02:50

Answer 3

下班回家时我会详细看看这个。现在，以下内容可以帮助您入门：

将以下属性添加到样式中以定位字符：

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

增加$ X以在水平线上显示您的角色并增加/减少$ Y以更改垂直位置。要创建所需的铃铛形状，每次增加/减少$ Y增加/减少数量，取决于你是在单词的中间之前还是之后。

PHP + CSS + Lettering.js创建弯曲文本

3 个答案: