Холст изменяемого размера (JQuery UI)

Холст имеет два типа поведения при изменении размера:

• Изменение размера, при котором содержимое растягивается в соответствии с новыми размерами холста
• Изменение размера, при котором содержимое остается статичным, в то время как холст растет или уменьшается

Вот страница, демонстрирующая два типа "изменения размера": http://xavi.co/static/so-resizable-canvas.html

Если вам нужен первый тип изменения размера (растягивание содержимого), то поместите холст в контейнер div и с помощью CSS установите ширину и высоту холста на 100%. Вот как может выглядеть этот код:

/* The CSS */
#stretch {
    height: 100px;
    width: 200px;
}

#stretch canvas {
    width: 100%;
    height: 100%;
}

<!-- The markup -->
<div id="stretch"><canvas></canvas></div>

// The JavaScript
$("#stretch").resizable();

Второй тип изменения размера (статический контент) - это двухступенчатый процесс. Сначала необходимо настроить атрибуты width и height для элемента холста. К сожалению, это очищает холст, поэтому необходимо перерисовать все его содержимое. Вот небольшой код, который делает это:

/* The CSS */
#resize {
    height: 100px;
    width: 200px;
}

<!-- The markup -->
<div id="resize"><canvas></canvas></div>

// The JavaScript
$("#resize").resizable({ stop: function(event, ui) {
    $("canvas", this).each(function() { 
        $(this).attr({ width: ui.size.width, height: ui.size.height });

        // Adjusting the width or height attribute clears the canvas of
        // its contents, so you are forced to redraw.
        reDraw(this);
    });
} });

В настоящее время код выше перерисовывает содержимое холста, когда пользователь перестает изменять размер виджета. Можно перерисовать холст на resize, однако события изменения размера происходят довольно часто, и перерисовка является дорогостоящей операцией -- подходим с осторожностью.