добавьте высоту 100 пикселей при добавлении прямоугольников

Question

У моего холста нет высоты, и я хочу сохранить его таким образом. Статическая. Всякий раз, когда я добавляю прямоугольник, я хотел бы увеличить высоту холста со 100 пикселями, например.

https://jsfiddle.net/5qybcp84

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

Я попытался с помощью $("#NodeList").width('200').height($("#NodeList").height()+100);

Но это только увеличивает весь холст, включая прямоугольники.

Answer 1

Насколько я знаю, ширина/высота холста не должна изменяться, когда что-то уже нарисовано на нем (если только не по уважительным причинам).

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

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

var canvas = $('#NodeList').get(0); 
var ctx = canvas.getContext('2d'); 
canvas.height = 200; 

var rects = [ 
    [20, 20, 150, 100], 
    [20, 140, 150, 100], 
    [20, 260, 150, 100] 
]; 
for (var i = 0; i < rects.length; i++) { 
    canvas.height = canvas.height + 100; 
    ctx.clearRect(0, 0, canvas.width, canvas.height); 
    //here we redraw previous rectangles 
    for (var j = 0; j < i; j++) { 
     ctx.fillRect(rects[j][0], 
     rects[j][1], 
     rects[j][2], 
     rects[j][3]); 
    } 
    ctx.fillRect(rects[i][0], 
    rects[i][1], 
    rects[i][2], 
    rects[i][3]); 

} 

$('#NodeList').click(function (e) { 
    var x = e.offsetX, 
     y = e.offsetY; 

    for (var i = 0; i < rects.length; i++) { 
     if (x > rects[i][0] && x < rects[i][0] + rects[i][2] && y > rects[i][1] && y < rects[i][1] + rects[i][3]) { 
      alert('Rectangle ' + i + ' clicked'); 
     } 
    } 
}); 

Demo