Как отменить последнее действие при рисовании в canvas карандашом (pencil)? - HTML5 Canvas - Ответ 14466349

@Sergey1234 · Регистрация: 26.10.2010

Author24 — интернет-сервис помощи студентам

Задача:

создать холст canvas с возможностью свободного рисования на нем "карандашом",
с возможностью полной отмены нарисованного (очисткой холста)
с возможностью отмены последнего действия (последней линии, нарисованной "карандашом").

Статус выполнения: выполнено частично. Создан холст, работает "карандаш", работает полная очистка холста. Не получается написать механизм отмены последнего действия ''карандаша", последней проведенной кривой.

Причина сбоя: не хватает данных из-за недостаточного личного опыта работы с canvas. Гугление ТОП-30 к явному ответу также не привело.

Запрос: помощь и/или совет по решению задачи отмены последнего действия "карандаша".

Плюс, ответ на этот вопрос заполнит в Сети информационный пробел для будущих разработчиков.

Текущий код JS:

Javascript

if(window.addEventListener) {
    window.addEventListener('load', function () {
    
    var canvas, context, tool;
 
    function init () {
        // Находим canvas элемент
        canvas = document.getElementById('tablet');
        
        if (!canvas) {
            alert('Ошибка! Canvas элемент не найден!');
            return;
        }
 
        if (!canvas.getContext) {
            alert('Ошибка: canvas.getContext не существует!');
            return;
        }
 
        // Получаем 2D canvas context.
        context = canvas.getContext('2d');
        if (!context) {
            alert('Ошибка: getContext! не существует');
            return;
        }
        
        tool = new tool_pencil();
        canvas.addEventListener('mousedown', ev_canvas, false);
        canvas.addEventListener('mousemove', ev_canvas, false);
        canvas.addEventListener('mouseup',   ev_canvas, false);
    }
    
        // Очистка всего нарисованного на поле
        document.getElementById('clear').addEventListener('click', function() {
        context.clearRect(0, 0, tablet.width, tablet.height);
        }, false);
 
    // Здесь мы будем ловить движения мыши
    function tool_pencil () {
        var tool = this;
        this.started = false;
 
    
        this.mousedown = function (ev) {
            context.beginPath();
            context.moveTo(ev._x, ev._y);
            tool.started = true;
        };
 
        // Эта функция вызывается каждый раз, когда вы перемещаете мышь.
        // Но рисование происходит только когда вы удерживаете кнопку мыши
        // нажатой.
        this.mousemove = function (ev) {
            if (tool.started) {
                context.lineTo(ev._x, ev._y);
                context.stroke();
            }
        };
 
        // Событие при отпускании мыши
        this.mouseup = function (ev) {
            if (tool.started) {
                tool.mousemove(ev);
                tool.started = false;
            }
        };
    }
 
    // Эта функция определяет позицию курсора относительно холста
    function ev_canvas (ev) {
        if (ev.layerX || ev.layerX == 0) { // Firefox
            ev._x = ev.layerX;
            ev._y = ev.layerY;
        } else if (ev.offsetX || ev.offsetX == 0) { // Opera
            ev._x = ev.offsetX;
            ev._y = ev.offsetY;
        }
 
        // Вызываем обработчик события tool
        var func = tool[ev.type];
        if (func) {
            func(ev);
        }
    }
 
    init();
 
}, false); }

И очевидный тег в HTML:

HTML5

1 2	<canvas id = "tablet" width="1050" height="900"></canvas> <button id="clear">Очистка всего холста</button>

Благодарю сообщество за помощь в решении!

Добавлено через 26 минут
Вопрос снят. Для меня подходит ответ тут: https://stackoverflow.com/ques... ing-canvas

Пуст код останется для будущих искателей, не знакомых с английским:

HTML5

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<!--[if lt IE 9]><script type="text/javascript" src="../excanvas.js"></script><![endif]-->
 
<style>
    body{ background-color: ivory; }
    canvas{border:1px solid red;}
</style>
 
<script>
$(function(){
 
    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");
    var lastX;
    var lastY;
    var mouseX;
    var mouseY;
    var canvasOffset=$("#canvas").offset();
    var offsetX=canvasOffset.left;
    var offsetY=canvasOffset.top;
    var isMouseDown=false;
    var brushSize=20;
    var brushColor="#ff0000";
    var points=[];
 
 
    function handleMouseDown(e){
      mouseX=parseInt(e.clientX-offsetX);
      mouseY=parseInt(e.clientY-offsetY);
 
      // Put your mousedown stuff here
      ctx.beginPath();
      if(ctx.lineWidth!=brushSize){ctx.lineWidth=brushSize;}
      if(ctx.strokeStyle!=brushColor){ctx.strokeStyle=brushColor;}
      ctx.moveTo(mouseX,mouseY);
      points.push({x:mouseX,y:mouseY,size:brushSize,color:brushColor,mode:"begin"});
      lastX=mouseX;
      lastY=mouseY;
      isMouseDown=true;
    }
 
    function handleMouseUp(e){
      mouseX=parseInt(e.clientX-offsetX);
      mouseY=parseInt(e.clientY-offsetY);
 
      // Put your mouseup stuff here
      isMouseDown=false;
      points.push({x:mouseX,y:mouseY,size:brushSize,color:brushColor,mode:"end"});
    }
 
 
    function handleMouseMove(e){
      mouseX=parseInt(e.clientX-offsetX);
      mouseY=parseInt(e.clientY-offsetY);
 
      // Put your mousemove stuff here
      if(isMouseDown){
          ctx.lineTo(mouseX,mouseY);
          ctx.stroke();     
          lastX=mouseX;
          lastY=mouseY;
          // command pattern stuff
          points.push({x:mouseX,y:mouseY,size:brushSize,color:brushColor,mode:"draw"});
      }
    }
 
 
    function redrawAll(){
 
        if(points.length==0){return;}
 
        ctx.clearRect(0,0,canvas.width,canvas.height);
 
        for(var i=0;i<points.length;i++){
 
          var pt=points[i];
 
          var begin=false;
 
          if(ctx.lineWidth!=pt.size){
              ctx.lineWidth=pt.size;
              begin=true;
          }
          if(ctx.strokeStyle!=pt.color){
              ctx.strokeStyle=pt.color;
              begin=true;
          }
          if(pt.mode=="begin" || begin){
              ctx.beginPath();
              ctx.moveTo(pt.x,pt.y);
          }
          ctx.lineTo(pt.x,pt.y);
          if(pt.mode=="end" || (i==points.length-1)){
              ctx.stroke();
          }
        }
        ctx.stroke();
    }
 
    function undoLast(){
        points.pop();
        redrawAll();
    }
 
    ctx.lineJoin = "round";
    ctx.fillStyle=brushColor;
    ctx.lineWidth=brushSize;
 
    $("#brush5").click(function(){ brushSize=5; });
    $("#brush10").click(function(){ brushSize=10; });
    // Important!  Brush colors must be defined in 6-digit hex format only
    $("#brushRed").click(function(){ brushColor="#ff0000"; });
    $("#brushBlue").click(function(){ brushColor="#0000ff"; });
 
    $("#canvas").mousedown(function(e){handleMouseDown(e);});
    $("#canvas").mousemove(function(e){handleMouseMove(e);});
    $("#canvas").mouseup(function(e){handleMouseUp(e);});
 
    // hold down the undo button to erase the last line segment
    var interval;
    $("#undo").mousedown(function() {
      interval = setInterval(undoLast, 100);
    }).mouseup(function() {
      clearInterval(interval);
    });
 
 
}); // end $(function(){});
</script>
 
</head>
 
<body>
    <p>Drag to draw. Use buttons to change lineWidth/color</p>
    <canvas id="canvas" width=300 height=300></canvas><br>
    <button id="undo">Hold this button down to Undo</button><br><br>
    <button id="brush5">5px Brush</button>
    <button id="brush10">10px Brush</button>
    <button id="brushRed">Red Brush</button>
    <button id="brushBlue">Blue Brush</button>
</body>
</html>

Вернуться к обсуждению:
Как отменить последнее действие при рисовании в canvas карандашом (pencil)? HTML5 Canvas