Масштабирование в холст через js приводит к потере контента?

Question

http://deepschool.kd.io/Pages/Experiments/draw.htm

Это редактор изображений, над которым я работаю, но у него есть ошибка. Предположим, вы создали изображение с увеличением в 15 раз, когда вы изменяете масштаб изображения, изображение теряется. Почему это? и что такое средство?

HTML:

Zoom: 
<input type="number" id="zoom" min="1" max="50" onchange="zoomy()"> 

JS:

var zoomy = function() { 
    var zoomamount = zoom.value 
    var canvassize = zoomamount * 16 
    c.width = canvassize 
    c.height = canvassize 
}; 

Заранее спасибо

Answer 1

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

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

var gridOfPixels = []; 

Предположим, вы в порядке со статическим размером на данный момент. Сделайте это 8x8 пикселей. В начале вы хотите инициализировать свой массив:

for (var i=0; i < 8*8; i++) gridOfPixels[i] = 0; 

Таким образом, холст сетки готов, теперь нам нужно его нарисовать.

function renderGrid() { 
    for (var y=0; y < 8; y++) 
     for (var x=0; x < 8; x++) 
      renderPixel(x, y, gridOfPixels[x+y*8]); 
} 

Вы уже знаете, как renderPixel - вычислить положение прямоугольника (PosX = х * pixWidth, Пози * pixHeight), где pixWidth является canvasWidth/8, и т.д .. Теперь вы рисуете все пиксели, используя треть параметр для цвета.

Чтобы закончить, вы должны подключить onclick, чтобы поместить пиксель в сетку, а затем вызвать renderGrid, чтобы пользователь увидел изменение.

$('#my-canvas').click(function(e) { 
    var x = ...; 
    var y = ...; // calculate the position of pixels from mouse position inside canvas 
    // dont forget to check that x,y are in the 0-7 range 
    // dont forget to convert x,y to whole number using parseInt() 
    gridOfPixels[x+y*8] = 1; 
    renderGrid(); // update the grid canvas 
}); 

Теперь, каждый раз, когда вы изменить размер холста или изменить некоторые переменные, исходное содержание холста будет сохранено в сетке, и вы можете renderGrid() в любое время, что вам нужно. Вы могли бы даже сделать это в реальном времени, оживляя цвет пикселей и т. Д.

Удачи. :)