Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   js cnavas отмена предыдущего действаия (https://javascript.ru/forum/misc/8203-js-cnavas-otmena-predydushhego-dejjstvaiya.html)

hangover 14.03.2010 16:59

js cnavas отмена предыдущего действаия
 
здрасвуйте. Вознло два вопроса?
1) Допустим есть онлайн рисовалка, огранизования на яваскриптах.
Линии рисуються средствами canvas`a. (document.createElement("canvas"); , moveTo , LineTo). Можно ли какнбудь отменать предудшее действие ( стандарт - ctrl +z ) ? интересует именно как убарть ( удалить ) линию. (Нарисовать сверху предыдущей - такуюже линию цветом фона - не подходит.)

2)Как правильно сделать рисовании линии за крусором регулируемой ширины?
пока сделаc с помошью linewidth. но как не красиво получаеться :)


больше всего волнует первый вопрос.
заранее благодарен

Kolyaj 14.03.2010 18:31

Цитата:

Сообщение от hangover
Нарисовать сверху предыдущей - такуюже линию цветом фона - не подходит.

Что-то поверх придётся нарисовать. Что -- нужно запоминать в процессе рисования.

hangover 15.03.2010 09:05

так если например одна линиия была, и через нее провести еше одну ( крест на крест ), и ели сверху вторю просто зарисовттаь цветом фона - то тогда на первой линии все равно останеться отпечаток

subzey 15.03.2010 09:44

Канвас умеет экспортировать PNG (метод toDataURL). Сохраняйте это в строку, а потом, при необходимости отмены, накатывайте.

Kolyaj 15.03.2010 11:54

hangover,
Что нарисовать, нужно запоминать в процессе рисования. Например, как предложил subzey.

hangover 23.03.2010 03:41

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

subzey 23.03.2010 10:56

А можно примерно так:

У нас есть див с position: relative. Внутри него — канвас с position: absolute. Див ждет события mousedown, после чего по координатам мыши рисует в этой канве что-либо.

Далее кнопка отпущена, и при этом создается новый канвас, с position: absolute, поверх старого, и отрисовка производится уже на нем. Таким образом, у нас получается, что каждое действие находится в отдельном слое.

Когда количество слоев доходит до, скажем, 20, намый «нижний» из пачки объединяется с «пред-нижним». Для этого используем .drawImage() (пример тут), который может отрисовывать графическое содержимое не только <img>, но и других <canvas>. Копируем содержимое «пред-нижнего» в «нижний», и после этого удалем «пред-нижний».

Как теперь делать отмену, думаю, понятно — убираем по очереди слои-канвасы сверху.

Вот так, дешево и сердито. :)


Часовой пояс GMT +3, время: 12:49.