Рассчитать координаты точки после увеличения JavaScript

Question

У меня есть требование сделать несколько комментариев к изображению. Это изображение является масштабируемым (можно увеличивать и уменьшать масштаб). Теперь задача состоит в том, чтобы аннотации также перемещались с масштабированием. Как мне этого добиться? Я понимаю, что «направление» масштабирования зависит от точки, которая считается «центром» при масштабировании, поэтому при условии, что этот «центр» является абсолютным центром контейнера iamge (ширина / 2, высота / 2), как я могу получить координаты одной и той же точки на изображении после увеличения?

В качестве примера рассмотрим следующие два изображения:

Изображение-1 (нормальный масштаб):

Изображение-2 (увеличено -in):

Если я знаю координаты красной точки на изображении-1 (в нормальном масштабе), как мне получить координаты (х, у ) той же красной точки на изображении-2? Обратите внимание, что ширина и высота контейнера изображения будут оставаться неизменными на протяжении всего процесса масштабирования.

Answer 1

Эта функция должна возвращать ваши новые X и Y, измеренные в левой верхней части изображения. Имейте в виду, что новые координаты могут быть вне ширины / высоты вашего изображения, так как выбранная вами точка может быть «уменьшена от края»

/**
 * width: integer, width of image in px
 * height: integer, height of image in px;
 * x: integer, horizontal distance from left
 * y: integer, vertical distance from top
 * scale: float, scale factor (1,5 = 150%)
 */
const scaleCoordinates = (width, height, x, y, scale) =>{
	const centerX = width/2;
  const centerY = height/2;
 	const relX = x - centerX;
  const relY = y - centerY;
  const scaledX = relX * scale;
  const scaledY= relY * scale;
  return {x: scaledX + centerX, y: scaledY + centerY};
  

}

console.log(scaleCoordinates(100,100,25,50, 1.2));

Answer 2

Во-первых, вы хотите определить координаты аннотации относительно центра изображения.

Так, например, на изображении размером 200 x 100 точка (120, 60) с началом координат в левом верхнем углу будет (20, -10), если вы возьмете центр изображения в качестве происхождение.

Если вы масштабируете изображение на 150%, вашими новыми координатами будут те координаты, умноженные на 1,5 (= 150%). В нашем примере это будет 30, -15.

Чем вы можете вычислить это обратно до абсолютных значений с исходной точкой происхождения