Как получить координаты при масштабировании canvas с imagedata внутри

Question

Делаю пиксельный редактор. У меня есть canvas (viewport) Я легко могу получить координаты внутри него с помощью методов e.offsetX и Y

Я хочу сделать canvas масштабируемым (чтобы его можно было зумить и двигать мышкой, примерно как в гугл картах)

Для этого я создаю еще один canvas Размером который мне нужен( поле моего редактора ограничено)

let new_canvas = document.createElement('canvas');
new_canvas.width = 500;
new_canvas.height = 500;
let new_canvas_ctx = new_canvas.getContext('2d');
// create image_data object and fill it

let image_data_canvas = ctx.createImageData(500,500);

Создаю объект ImageData и заполняю его данными

// fill the image data
let i;
let max_l = image_data_canvas.data.length;
for (i = 0; i < max_l; i += 4) {
    image_data_canvas.data[i] = 255; // R
    image_data_canvas.data[i+1] = 0; // G
    image_data_canvas.data[i+2] = 0; // B
    image_data_canvas.data[i+3] = 255; // A
}

// put the image to new canvas context
new_canvas_ctx.putImageData(image_data_canvas, 0, 0);

Рисую это все на новом canvas. Далее я масштабирую старый canvas (viewport) и уже после этого рисую новый canvas на нем

// main loop
window.requestAnimationFrame(draw);
function draw() {

    // clear
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    // draw something
    ctx.imageSmoothingEnabled = false;
    // scale
    // draw new canvas
    ctx.drawImage(new_canvas, 0,0);

    window.requestAnimationFrame(draw);
}

Делаю я это с помощью матриц трансформаций.

let matrix = [1,0,0,1,0,0];

// but also save the scale in the matrix
function scale(x,y){
    matrix[0] *= x;
    matrix[1] *= x;
    matrix[2] *= y;
    matrix[3] *= y;
    ctx.scale(x,y);
}

Теперь мне нужно получить координаты уже увеличенных пикселей. Как это сделать? Например если я направил мышку в центр холста и сделал scale(0.5,0.5) (уменьшил холст вдвое) То по старым коррдинатам я получу центр viewport а по новым правый нижний край (то есть 500px на 500px)

БЛОГ НА HUSL

Как получить координаты при масштабировании canvas с imagedata внутри

Ответы (0 шт):