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

我正在使用lettering.js在字符串中的每个字母周围包装<span>元素。我正在使用PHP获取字符串。在下面的例子中，$bellcurve还没有定义 - 这个例子就是我想我可以找到解决方案的方法，但我不确定这是否是正确的方式（但这是问题）。PHP + CSS + Lettering.js创建曲线文本

所以考虑到：

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

来源

2012-01-12 j-man86

你有什么问题？计数字符？为他们添加跨度？ – Wrikken 2012-01-12 23:27:50

完成后提供链接 - 我不知道它是什么样的！这并不难，但我现在太懒惰了：P – v01pe 2012-01-12 23:45:19

@wrikken我已经澄清了一些问题 – 2012-01-13 00:49:01

可以使用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。

来源

2012-01-13 20:22:50 MikeM

谢谢！正是我所期待的。我在答案的底部添加了PHP版本。假设我想通过旋转曲线形状中的字母来扩展效果，以便最后一个字母的角度为第一个字母的角度的正值，而中间的字母的角度为0 。我认为这更像是一个SIN波...你知道什么功能可以实现吗？再次感谢！ – 2012-01-14 04:01:41

@ j-man86遇到了这个js库并记住了这个问题，查看了[Arctext.js]（http://tympanus.net/Development/Arctext/），它确实以曲线的形状（和其他效果） – MikeM 2013-03-11 02:26:32

我已经找到了这种解决方案非常迅速，使用str_split来拆分成词字符，然后你可以用它来寻找位数：

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

数中位数（数ARG1，ARG2号[，...号] ）

数中位数（数字阵列）

这个功能是从http://php.net/manual/en/ref.math.php和用户crescentfreshpot在雅虎点com 27月 - 2005年02:50

来源

2012-01-13 00:06:38 anjalis

这并不能真正帮助他。他不是在寻找数字数组的中值。 – CanSpice 2012-01-13 00:52:23

-2

我会详细看看这个当我下班回家时。现在，下面应该让你开始：

添加以下属性你的风格来定位字符：

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

增加$ X上水平线和增加/减少$显示你的角色Y改变垂直位置。要创建所需的钟形，请每次增加/减少$ Y，增加/减少数字，具体取决于您是在词语的中间位置之前还是之后。

来源

2012-01-13 04:31:17 Erik

谢谢埃里克，但问题不是如何在CSS中使用绝对定位，它是如何使用PHP函数自动创建css定位，给定任何字符串。 – 2012-01-13 20:21:52

您可以使用substr（）strlen（）和for循环将您的单词拆分为一个字母数组，然后遍历字母数组并使用上面发布的代码行来显示它们。如果你想让我为你写出所有的代码，请问。 – Erik 2012-01-14 01:38:54

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

回答

相关问题