HTML Canvas - автоматическое изменение размера при его содержании

Question

Как я могу установить холст HTML5 для автоматического изменения размера, когда содержимое внутри него выходит за пределы его полей? Я разрабатываю приложение генеалогического древа, и когда поколение становится шире, чем определенные пределы холста, линии, соединяющие узлы вместе, исчезают.

Answer 1

С полотном нет автоматических функций. Это пассивное растровое изображение, которое вы можете использовать для рисования графики, поэтому все формы логики должны быть реализованы «вручную».

Для того, чтобы увеличить его, вам нужно будет отслеживать позиции и размеры всего, что нарисовано, поэтому вы можете рассчитать итоговую ограничительную рамку для текущей графики.

Если позиция + размер этого ограничивающего окна превышает размер холста, обновите размер холста с помощью этого (размер холста = ограничивающая рамка «позиция + размер»).

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

Answer 2

Опять же, это действительно зависит от того, как вы рисуете содержание, но вот пример того, как сделать это при рисовании изображения на холст ..

var canvas = document.getElementById('canvas'), 
    context = canvas.getContext('2d'); 
    base_image = new Image(); 
    base_image.src = 'someImaeg.png'; 
    base_image.onload = function(){ 
     document.getElementById('canvas').width = base_image.width; 
     document.getElementById('canvas').height = base_image.height; 
     context.drawImage(base_image, 0, 0); 
    } 

Fiddle