Метод Javascript Scale (x, y) не работает на Canvas с отрицательным параметром

Я пытаюсь перевернуть изображение, используя метод scale(). У меня есть этот код:

ctx.save();
ctx.scale(-1, 1);

ctx.drawImage(Img, 0, 0, 100, 100);

ctx.restore();

Когда я помещаю 1, 1 в параметр масштаба или любое другое действительное число, функция масштабирования работает нормально. Но как только я ставлю отрицательный параметр, такой как -1 (чтобы перевернуть изображение по горизонтали), изображение вообще не рисуется. Код находится в функции с setInterval 12 кадров в секунду. Я искал везде, но не могу найти решение. Любая помощь или предложения будут оценены. Спасибо!


javascript canvas scale drawimage
person Community    schedule 28.09.2014    source источник
comment
jsfiddle.net/yong/ZJQX5 :)   -  person Filip Vondrášek    schedule 29.09.2014
comment
Ваше перевернутое изображение рисуется с холста. Сбросьте x, y в вашем drawImage, чтобы изображение возвращалось на холст.   -  person markE    schedule 29.09.2014
comment
Ах, так координаты изображения были перенесены в отрицательное измерение :O Теперь работает как шарм, большое спасибо!   -  person    schedule 29.09.2014

Ответы (1)


arrow_upward
0
arrow_downward

как сказал markE, всякий раз, когда вы масштабируете, поворачиваете или трансформируете холст, используемые вами координаты будут реагировать на изменение преобразования холста - в вашем случае отправка изображения с холста. Чтобы перевернуть изображение на месте, вам следует рассмотреть возможность использования перевода с шириной изображения в качестве первого параметра:

ctx.save();

//The scale will flip the whole canvas, and will move the image 
//to the left (by the image width size)
ctx.scale(-1, 1);

//Using translate to move the image back to it's original origin
ctx.translate(Img.width, 0)

ctx.drawImage(Img, 0, 0, 100, 100);

ctx.restore();
person idan baraness    schedule 22.06.2017