Изменчивый холст (пользовательский интерфейс JQuery)

Ответ 1

Canvas имеет два типа поведения изменения размера:

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

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

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

/* 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 элемента canvas. К сожалению, это очищает холст, поэтому вы должны повторно рисовать все его содержимое. Здесь бит кода, который делает это:

/* 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, однако события изменения размера происходят довольно часто, а повторные розыгрыши - дорогостоящие операции - осторожно подходите.

Ответ 2

Там немного смешная причуда в системе координат холста в отношении использования этого:

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

(из приведенного выше примера)

Вы должны использовать эти правила CSS, потому что вы не можете указать% в атрибутах width/height canvas. Но вы обнаружите, что получаете неожиданные результаты, когда вы пытаетесь нарисовать объекты на нем, используя только эти правила - нарисованные объекты кажутся раздавленными. Здесь выше CSS, с границей canvas...

    /* The CSS */
    #stretch {
        width: 200px;
        height: 100px;          
    }
    #stretch canvas {
        border:1px solid red;
        width: 100%;
        height: 100%;
    }

Холст обращается к правильному размеру, и правило границы выполняется правильно. Синий прямоугольник, добавленный в код в другом месте, должен заполнить полотно с 20px прокладкой вокруг, но этого не произошло:

Чтобы исправить это, убедитесь, что также укажите ширину и высоту для элемента canvas (либо в HTML, либо в javascript с помощью setAttribute):

canvas.setAttribute('width', '200');
canvas.setAttribute('height', '100');

или

<canvas width=200 height=100></canvas>

Теперь, когда я обновляю страницу, я получаю то, что ожидал:

Эта "двойная проверка" гарантирует, что холст будет рисоваться с использованием правильной системы координат и по-прежнему позволяет изменять его с помощью правил CSS. Если это ошибка, я уверен, что она будет исправлена ​​со временем.

Это всего лишь предоставление исправления, но вы можете прочитать в нем здесь

Ответ 3

Хорошо, почему бы не применить div до элемента canvas и изменить размер этого элемента, и когда он прекратит применять ширину и высоту в холсте, а затем перерисовать холст.