пытается отлаживать отменить функциональность программы холст краски

Question

вот моя страница http://www.dev.1over0.com/canvas/canvas_web.html

У меня возникли проблемы с функциональностью отмен - Я думаю, что я близко, но вот вопрос

Сначала я» расскажет вам основу приложения для рисования - я отводки четыре полотна http://www.dev.1over0.com/canvas/js/canvas_web.js , если вы посмотрите на JS файл, который вы увидите в верхнем всех моих комментариях о том, что я делаю с полотнами

когда пользователь использует инструмент рисовать - это на самом деле тянет его первым временно на imageTemp холст - каждый инструмент имеет собственный объект (карандаш, прямоугольник, линия) с функциями внутри для MouseDown, MouseMove и MouseUp событий

в конце MouseUp событие вызывает эту функцию

function img_update() { 
contexto.drawImage(canvas, 0, 0); 
saveActions(); 
context.clearRect(0, 0, canvas.width, canvas.height); 
} 

Здесь изображение, которое на временный холст заканчивается втягивается на ImageView холсте так, по существу, холст imageTemp стирается каждый раз

так что для функциональности отмен I первый объявить пустой массив

var undoHistory = []; 

Я также объявить новый образ

var undoImg = new Image(); 

когда img_update вызывается - он вызывает другую функцию saveActions

function saveActions() { 
var imgData = canvaso.toDataURL("image/png"); 
undoHistory.push(imgData); 
$('#undo_canvas button').removeAttr('disabled'); 
} 

В этой функции - Я, по существу сохраняя недавно нарисовали изображение canvas в массив undoHistory Кажется, что он работает нормально (я считаю) Итак, после каждого постоянного просмотра Полотно обновлено сохраняет это состояние в массив

Теперь, если вы заметили, когда вы рисуете изображение, и это сохранить в ImageView холст кнопка отмены становится включенными

Так что, если вы нажмете на кнопку отмены, она вызывает эту функцию

function undoDraw() { 
if(undoHistory.length > 0){ 
$(undoImg).load(function(){ 
contexto.drawImage(undoImg, 0,0); 
}); 
undoImg.src = undoHistory.pop(); 
if(undoHistory.length == 0) { 
$('#undo_canvas button').attr('disabled','disabled'); 
} 
} 
}        

Вот что я пытаюсь сделать, это взять предыдущее состояние изображения и нарисуйте его на холсте он работает таким образом, что это влияет на Z-индекс изображений, но не избавившись от изображений И вам нужно дважды щелкнуть по нему, что смущает меня

Итак, если вы можете попытаться вытянуть три прямоугольника друг на друга Вы можете нажать кнопку отмены, и это будет влиять на z-index - щелкните по нему три раза, вы увидите, что я имею в виду, поэтому это своего рода работа , может быть; - {

Answer 1

Перед тем, как нарисовать последнее изображение, вы должны очистить холст, иначе он нарисует изображение на предыдущем холсте; Также вы вытаскиваете последнее изображение, которое вы только что нажали (вот почему вам нужно дважды щелкнуть).Поэтому попробуйте что-то вроде этого (вам, возможно, придется адаптировать код, я не уверен, что он работает из коробки)

function undoDraw(){ 
    if(undoHistory.length > 0){ 
     $(undoImg).load(function(){ 
      contexto.clearRect(0,0, canvas.width, canvas.height);  
      contexto.drawImage(undoImg, 0,0); 
    }); 
    undoHistory.pop(); 
    undoImg.src = undoHistory.pop(); 
    if(undoHistory.length == 0) { 
    $('#undo_canvas button').attr('disabled','disabled'); 
     } 
    }     
}