Как работает позиционирование наложенного изображения в облачном хранилище?

Question

с учетом URL (изображения) ниже в качестве примера https://res.cloudinary.com/demo/image/upload/w_220,h_140,c_fill/l_brown_sheep,w_220,h_140,c_fill,x_220,y_140/l_horses,w_220,h_140,c_fill,x_220,y_140/yellow_tulip.jpg

Насколько я понимаю, первое изображение yellow_tulip нарисовано на (0, 0), который является верхним левым углом. Второе изображение brown_sheep рисует от (220, 140), который является правым нижним углом yellow_tulip, потому что (0, 0) начинается с верхнего левого угла холста.

Все имеет смысл из того, что я понимаю, пока не начнется третье изображение. horses также начинается с (220, 140), но как получается, что оно начинается с центра второго изображения brown_sheep? Я действительно смущен.

Answer 1

Размеры изображения изменяются при применении изменений наложения, поэтому их следует учитывать при применении координат x и y.

Координаты рассчитываются по центру изображения, но с учетом размерадля холста на первом изображении - 220 на 140, установка координат оверлея коричневой овцы на 220 на 140 увеличит размер холста до 440 на 280.

Значение следующего URL теперь 440 на 280 https://res.cloudinary.com/demo/image/upload/w_220,h_140,c_fill/l_brown_sheep,w_220,h_140,c_fill,x_220,y_140/l_horses,w_220,h_140,c_fill/yellow_tulip.jpg

Чтобы теперь наложить коня на коричневую овцу, вам необходимо пересчитать размеры следующим образом: https://res.cloudinary.com/demo/image/upload/w_220,h_140,c_fill/l_brown_sheep,w_220,h_140,c_fill,x_220,y_140/l_horses,w_220,h_140,c_fill,x_110,y_70/yellow_tulip.jpg

Или https://res.cloudinary.com/demo/image/upload/w_220,h_140,c_fill/l_brown_sheep,w_220,h_140,c_fill,x_220,y_140/l_horses,w_220,h_140,c_fill,x_330,y_210/yellow_tulip.jpg