ПРОБЛЕМА
Размеры исходного изображения:
- ширина: 2448
- высота: 2448
Размеры холста:
Положение и масштаб изображения на холсте
- x: 141,8 (координата х, где разместить изображение на холсте)
- y: 214.55 (координата y, где разместить изображение на холсте)
- ширина: 178,7 (ширина используемого изображения (растянуть или уменьшить изображение)
- высота: 134,1 (высота используемого изображения (растянуть или уменьшить изображение)
Я назвал drawImage так:
ctx.drawImage(img, x, y, width, height)
ctx.drawImage(img, 141.8, 214.55, 178.7, 134.1);
да! изображение масштабируется и правильно размещается на холсте.
но о нет! это отрезает лицо моего предмета! Мне нужно сместить исходное изображение, сохраняя положение и масштаб, которые были у меня на холсте.
Я знаю, что мне нужно использовать
context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
// sx: x coordinate where to start clipping
// sy: y coordinate where to start clipping
// swidth: The width of the clipped image
// height: The height of the clipped image
Мне нужно сместить в направлении х на 158 исходного изображения (ширина 2448)
После долгих часов проб разных уравнений и чтения документации, чтобы найти правильные числа, чтобы заполнить пропущенные переменные, я не мог понять, как сместить исходное изображение без изменения положения и масштабирования, которые у меня уже были.
Я ссылался на документацию здесь: https://www.w3schools.com/tags/canvas_drawimage.asp
и попытался здесь поэкспериментировать https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_canvas_drawimage2
нужны уравнения и объяснения для вычисления sx, sy, swidth и sheight!