HTML5 холст зум перерисовать

Question

В настоящее время им пытаются сделать холст зума, а также перерисовывать весь холст

var painter = document.getElementById('painter'); 

var cp = painter.getContext('2d'); 

var scale = 1; 
var originx = 0; 
var savedData = []; 
var originy = 0; 
var zoom = 0; 

$('#painter').on('mousewheel', function(event) { 

     var imgData = cp.getImageData(0, 0, painter.width, painter.height); 
     savedData.push(imgData); 
     var mousex = event.clientX - painter.offsetLeft; 
     var mousey = event.clientY - painter.offsetTop; 
     var wheel = event.deltaY;//n or -n 

     var zoom = 1 + wheel/2; 

     cp.translate(
      originx, 
      originy 
     ); 
     cp.scale(zoom,zoom); 
     cp.translate(
      -(mousex/scale + originx - mousex/(scale * zoom)), 
      -(mousey/scale + originy - mousey/(scale * zoom)) 
     ); 

     if (savedData.length > 0) { 
       var imgData = savedData.pop(); 
       cp.putImageData(imgData, 0, 0); 
      } 

     originx = (mousex/scale + originx - mousex/(scale * zoom)); 
     originy = (mousey/scale + originy - mousey/(scale * zoom)); 
     scale *= zoom; 

    }); 

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

Answer 1

getImageData & context.putImageData - очень дорогие операции.

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

var secondCanvas = document.createElement('canvas') 
var secondContext = secondCanvas.getContext('2d'); 
secondCanvas.width=mainCanvas.width; 
secondCanvas.height=mainCanvas.height; 
secondContext.drawImage(mainCanvas,0,0); 

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

mainContext.drawImage(secondCanvas,x,y); 

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

Zoom and pan in animated HTML5 canvas