Каким образом реализовать панорамирование и масштабирование на Canvas?

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

// задаем начальные значения
let canvas = document.getElementById('canvas');
let context = canvas.getContext('2d');
let img = new Image();
img.src = 'path-to-image';
let scale = 1;
let offsetX = 0;
let offsetY = 0;

img.onload = function() {
  drawImage();
}

// функция для перерисовки изображения
function drawImage() {
  context.clearRect(0, 0, canvas.width, canvas.height); // очищаем Canvas
  context.save();
  context.translate(offsetX, offsetY); // панорамирование
  context.scale(scale, scale); // масштабирование
  context.drawImage(img, 0, 0, img.width, img.height); // рисуем изображение
  context.restore();
}

// функция для обработки событий колесика мыши
canvas.addEventListener('mousewheel', function(event) {
  if (event.deltaY < 0) {
    scale *= 1.1; // увеличиваем масштаб
  } else {
    scale /= 1.1; // уменьшаем масштаб
  }
  drawImage(); // перерисовываем изображение
  event.preventDefault(); // отключаем прокрутку страницы колесиком мыши
});

// функция для обработки событий перемещения курсора мыши
canvas.addEventListener('mousemove', function(event) {
  if (event.buttons === 1) {
    let dx = event.movementX;
    let dy = event.movementY;
    offsetX += dx; // изменяем координаты
    offsetY += dy;
    drawImage(); // перерисовываем изображение
  }
});