Canvas - Reset Scale


1

Така. На тази въпрос съм сигурен, че Дончо вчера отговори, но лекцията понеже още не е ъплоудната - ще питам направо тук.

Имаме следния код (1ва задача от домашното):
http://jsfiddle.net/nzhul/34s2g/

Направил съм си една проста функция, която използвам за изчертаване на кръгче. Всичко работи добре с едно малко изключение.

Явно функцията .scale(); запаметява последното състояние в което се е намирала и при повторното и извикване скалирането се случва на база - вече скалиран обект. Тоест ако съм скалирал нещо от 1, 1 на 1,2 това ще ми направи двойно по-висок обект. Ако извикам отново scale(1,2) на нов обект - скалирането няма да е двойно, а ще е четворно. Тоест ще е същото като да напиша scale(1,4) за първи път.

Таа въпроса ми е - как да направя така, че scale() функцията да се ресетва всеки път когато искам да създам нов обект.

Благодаря предварително.

ПП: Доколкото си спомням беше нещо с .save() и .restore но не съм сигурен.




Отговори



5

Трябва да използваш .save() и след това .restore();

ctx.save();
ctx.scale(scaleX, scaleY);
ctx.arc(x, y, r, 0, 2 * Math.PI);
ctx.fill();
ctx.stroke();
ctx.closePath();
ctx.restore();
 
http://jsfiddle.net/34s2g/1/

от martin.nikolov (4535 точки)


2
Мисля, че беше така: Първо запаметяваш първите настройки с ctx.save(); След това правиш промените, изчертаваш си новите неща и след това ctx.restore(); връщат последното запаметено със save(). Успех!

от LERRY (582 точки)


0

Колеги, и аз имам проблеми със scale();

http://pastebin.com/XnwQNbCQ

Ако на 29-ти ред примерно променя скалирането, размерите на шапката ще се променят, въпреки че преди да започна шапката имам restore();. 

 Някой знае ли защо се получава така?


от ivan.mihov1 (4988 точки)


0
Ами на 9ред правиш сейф, на 20ред се връщаш към този сейф. На 22ред сменяш размера без да си направил сейф и на 27ред, когато искаш да се върнеш към предишно състояние, такова няма. То и надолу в кода има разни връщания към някакво състояние, което го няма запазено. Може би това е проблема. Ти някак си май опитваш да го хакнеш само с едно запазване, но не знам дали така е възможно ; )

от lostm1nd (846 точки)

0
context.save() Pushes the current state onto the stack.
context.restore() Pops the top state on the stack, restoring the context to that state.
Аааа...restore() не се ли връща към последния запазен сейв? Май съвсем блокирах с това рисуване...с четки и боичка се справях по-добре :)

от ivan.mihov1 (4988 точки)