在画布上双击删除点

Question

我有一个画布，用户可以点击它的任何部分在上面绘制点。众所周知，我们必须让用户能够撤消他已完成的操作。这就是我被卡住的地方，我该如何编写代码以允许用户在双击他要删除的点时删除该点？

<canvas id="canvas" width="160" height="160" style="cursor:crosshair;"></canvas>

1- 绘制画布并在其中加载图像的代码

var canvasOjo1 = document.getElementById('canvas'),
context1 = canvasOjo1.getContext('2d');
ojo1();

function ojo1()
{

base_image1 = new Image();
base_image1.src = 'https://www.admedicall.com.do/admedicall_v1//assets/img/patients-pictures/620236447.jpg';
base_image1.onload = function(){
context1.drawImage(base_image1, 0, 0);
}
}

2- 绘制点的代码

$("#canvas").click(function(e){
getPosition(e); 
});

var pointSize = 3;

function getPosition(event){
var rect = canvas.getBoundingClientRect();
var x = event.clientX - rect.left;
var y = event.clientY - rect.top;

drawCoordinates(x,y);
}

function drawCoordinates(x,y){  
var ctx = document.getElementById("canvas").getContext("2d");


ctx.fillStyle = "#ff2626"; // Red color

ctx.beginPath();
ctx.arc(x, y, pointSize, 0, Math.PI * 2, true);
ctx.fill();
}

我的小提琴：http://jsfiddle.net/xpvt214o/834918/

通过将鼠标悬停在图像上，我们会看到一个十字来创建点。

如果我想在双击创建一个点后如何删除它？

提前谢谢你。

Answer 1

请先阅读这个答案how to differentiate single click event and double click event，因为这是一件棘手的事情。

为了清楚起见，我通过删除不相关的内容来简化您的代码。

另外请阅读我的代码的 cmets。

let pointSize = 3;
var points = [];
var timeout = 300;
var clicks = 0;

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
let cw = (canvas.width = 160);
let ch = (canvas.height = 160);

function getPosition(event) {
  var rect = canvas.getBoundingClientRect();
  return {
    x: event.clientX - rect.left,
    y: event.clientY - rect.top
  };
}

function drawCoordinates(point, r) {
  ctx.fillStyle = "#ff2626"; // Red color
  ctx.beginPath();
  ctx.arc(point.x, point.y, r, 0, Math.PI * 2, true);
  ctx.fill();
}

canvas.addEventListener("click", function(e) {
  clicks++;
  var m = getPosition(e);
  // this point won't be added to the points array
  // it's here only to mark the point on click since otherwise it will appear with a delay equal to the timeout
  drawCoordinates(m, pointSize);
  
  if (clicks == 1) {
    setTimeout(function() {
      if (clicks == 1) {
        // on click add a new point to the points array
        points.push(m);
      } else { // on double click 
        // 1. check if point in path
        for (let i = 0; i < points.length; i++) {
          ctx.beginPath();
          ctx.arc(points[i].x, points[i].y, pointSize, 0, Math.PI * 2, true);

          if (ctx.isPointInPath(m.x, m.y)) {
            points.splice(i, 1); // remove the point from the array
            break;// if a point is found and removed, break the loop. No need to check any further.
          }
        }

        //clear the canvas
        ctx.clearRect(0, 0, cw, ch);
      }

      points.map(p => {
        drawCoordinates(p, pointSize);
      });
      clicks = 0;
    }, timeout);
  }
});

body {
  background: #20262E;
  padding: 20px;
}

<canvas id="canvas" style="cursor:crosshair;border:1px solid white"></canvas>