PHP + CSS + Lettering.js Создание изогнутого текста - PullRequest
Новая
       18

PHP + CSS + Lettering.js Создание изогнутого текста

3 голосов
/ 13 января 2012

Я использую 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 (индекс символа) будет создавать кривую колокола при повторении по общему количеству символов.

Или, если есть лучший подход, пожалуйста, дайте мне знать!

Спасибо!

Вот ответ, преобразованный в PHP из JavaScript: 

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

Ответы [ 3 ]

1 голос
/ 14 января 2012

Вы можете использовать функцию Гаусса , чтобы создать кривую, напоминающую "кривую колокола"

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 для изменениядисперсия кривой)

в этом примере jsfiddle использует javascript для применения стилей top к элементам span, должно быть достаточно простым для перевода вPHP.

0 голосов
/ 13 января 2012

Я подробно остановлюсь на этом, когда вернусь домой с работы. На данный момент вам следует начать следующее:

добавьте следующие атрибуты в ваш стиль для размещения символов: 

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

увеличьте $ X, чтобы отобразить ваших персонажей на горизонтальной линии, и увеличьте / уменьшите $ Y, чтобы изменить вертикальную позицию. Чтобы создать желаемую форму колокольчика, увеличивайте / уменьшайте значение $ Y на все большее / меньшее число каждый раз, в зависимости от того, находитесь ли вы до или после середины слова.

0 голосов
/ 13 января 2012

Я нашел это решение очень быстро, используйте str_split, чтобы разбить слово на символы, а затем вы можете использовать это, чтобы найти медиану:

crescentfreshpot в yahoo dot com 27-Jul-2005 02:50 Медиана:

число медиана (число arg1, число arg2 [, число ...])

число медиана (номера массивов)

эта функция от http://php.net/manual/en/ref.math.php и пользовательский crescentfreshpot на Yahoo точка ком 27-Jul-2005 02: 50

...