6

Добрый день!

Подскажите, пожалуйста, как можно такое реализовать при резиновой верстке?

alt text

Спасибо.

7
  • Объясните, кривая должна растягиваться? Кружки закреплены на кривой?
    – lampa
    22 апр 2013 в 9:10
  • Да, именно так.
    – Astor
    22 апр 2013 в 9:26
  • Причем, кружки находятся в центрированном блоке шириной 60% от окна браузера, а линия проходит через всю ширину экрана.
    – Astor
    22 апр 2013 в 9:50
  • @Astor ща намутим ;)
    – lampa
    22 апр 2013 в 10:00
  • @lampa, супер! Заранее спасибо. Сочтемся.
    – Astor
    22 апр 2013 в 10:01

3 ответа 3

7

Если честно, то я старался, но увы :D, как у вас на картинке не вышло, ибо займет очень много времени.

Да, реализовано кривыми Безье, и сама общая кривая состоит из нескольких частей.

Вот картинка для понимания, как вообще происходило строение: alt text

Как видно, метод bezierCurveTo() позволяет прорисовать только одну кривую Безье, по этому пришлось сделать несколько кривых (может быть я и не прав).

В общем вот отладочный код, который выше на скриншоте: http://pastebin.com/fkRtBvA8

Вот пример: http://jsfiddle.net/Fw5Q9/

И собственно сам код:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'></script>

<style>
html, body {
    margin:10px;
    padding:10px;
}
#worker {
    width: 100%;
    background: #ccc;
    height: 100%;
    position: relative;
}
.block {
    background: black;
    opacity: 0.5;
    width: 40px;
    height: 40px;
}

</style>

<script>
$(function() {
    var $worker = $('#worker')
    ,   $canvas = $('#picture')
    ,   ctx = $canvas[0].getContext('2d');
    

    
    
    function onResize() {
    
        
        var width = $worker.width();
        var height =  $worker.height();
        
        $canvas.attr({'width': width, 'height': height});
        
        /**
         * all ok
         */

        ctx.lineWidth = 3;
        ctx.strokeStyle = "#000";
            
        ctx.beginPath();
        ctx.moveTo(0, 0.1*height);
        
        
        ctx.bezierCurveTo(
            0, 0.1*height,
            0.02*width, 0,
            0.05*width, 0
        );
        
        ctx.bezierCurveTo(
            0.05*width, 0,
            0.11*width, 0,
            0.15*width, 0.5*height
        );
            
        ctx.bezierCurveTo(
            0.15*width, 0.5*height,
            0.186*width, height,
            0.3*width, height
        );
            
        ctx.bezierCurveTo(
            0.3*width, height,
            0.38*width, 1*height,
            0.4*width, 0.7*height
        );
            
        ctx.bezierCurveTo(
            0.4*width, 0.7*height,
            0.43*width, 0.3*height,
            0.5*width, 0.3*height
        );
        
        /**
         *
         */
        ctx.bezierCurveTo(
            0.5*width, 0.3*height,
            0.57*width, 0.3*height,
            0.6*width, 0.7*height
        );      
        
        ctx.bezierCurveTo(
            0.6*width, 0.7*height,
            0.62*width, 1*height,
            0.7*width, 1*height
        );
    
        ctx.bezierCurveTo(
            0.7*width, 1*height,
            0.814*width, 1*height,
            0.85*width, 0.5*height
        );
        
        ctx.bezierCurveTo(
            0.85*width, 0.5*height,
            0.89*width, 0,
            0.95*width, 0
        );
        
        ctx.bezierCurveTo(
            0.95*width, 0,
            0.98*width, 0,
            width, 0.1*height
        );
        
        ctx.stroke();
        
        return onResize;
    }
    
    function arc(ctx, x, y) {
        ctx.strokeStyle="#999";
        ctx.fillStyle="blue";
        ctx.arc(x-1,y,1, 0,2*Math.PI);
        ctx.stroke();
    }

    $(window).resize(onResize());
});

</script>


<div id='worker'>
    <canvas id="picture" style='position: absolute'></canvas>
    <table width=100% height=100%>
        <td width=16% align='right'>
            <div class='block'></div>
        </td>
        <td width=34%>
            <div class='block' style='margin-left: 75%'></div>
        </td>
        <td width=34%>
            <div class='block' style='margin-left: 20%'></div>
        </td>
        <td width=16% align='left'>
            <div class='block'></div>
        </td>
    </table>
</div>

Алсо, вам придется попотеть, находя идеальные значения для каждой кривой.

Я делал всё на листочке:

alt text

Но потом понял, что расчеты получились кривые и сохранить пропорции не получится, а переделывать уже не было времени.

6
  • 1
    @lampa, Вы волшебник! Спасибо.
    – Astor
    22 апр 2013 в 11:40
  • @Astor хех, но я посоветовал прибегать к канвасу на сайте в последний момент. Куда лучше просто заново продумать элемент. Например, сделать задний повторяющийся фон, чем экспериментировать :)
    – lampa
    22 апр 2013 в 11:44
  • То есть? не совсем понял о чем Вы... Разве это возможно реализовать без canvas? Ума не приложу как ...
    – Astor
    22 апр 2013 в 12:08
  • @Astor я о том, что было бы проще сделать волну обычной фоновой картинкой, которая просто повторялась. Но то, что вы хотели, можно реализовать либо с помощью canvas'a, либо растяжением картинки - но тут все вытекающие недостатки.
    – lampa
    22 апр 2013 в 12:11
  • 2
    Да ладно — все. А border-radius что мешает использовать?
    – Bars
    22 апр 2013 в 16:24
4

Вот мой вариант с использованием нескольких фигур, образующих волну своими границами:

http://bars.koding.com/test/wave.html

Этот вариант вполне подходит в случае появления кнопок (красных кружков) в местах перетекания одной дуги в другую: они скрывают несостыковки. Еще правильнее было бы, наверное, svg использовать.

5
  • @Bars, спасибо! Вы тоже волшебник! +1
    – Astor
    22 апр 2013 в 16:27
  • А в случае, если круги в отцентрованном блоке = 60%, при чем каждый круг в своем диве ... то как?
    – Astor
    22 апр 2013 в 16:31
  • Круги центрованы по горизонтали? Никак. Я делал с условием что круги должны находиться на самой линии, то есть, их положение зависит от линии. А вы говорите, что нужно линию подстраивать под кнопки. То есть, нужно сначала как-то растянуть кривую (резиновая же), потом каким-то образом подстроить ее таким образом, чтоб она проходила через все 4 точки, которые, в свою очередь, лежат на одной прямой. Я бы тогда посоветовал сформулировать условие нормально. А вот с дивами все просто: заменяете a на div и творите там что угодно, ведь, даже высота каждой кнопки определена.
    – Bars
    22 апр 2013 в 16:41
  • Еще раз спасибо
    – Astor
    22 апр 2013 в 16:43
  • @Bars браво!
    – lampa
    22 апр 2013 в 16:49
0

Можно нарисовать SVG и растягивать ее на всю ширину. А иконки располагать используя flex-box модель.

PS: Чтобы не быть голословным, набросал прототип http://goo.gl/czCEj . Работает только под WebKit, под другие браузеры делать лень.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.