Question

我使用画布创建了圆圈，但双击时无法删除它。

var canvas,
context, shapes,
dragging = false, draggingtoMove = false,
    dragStartLocation,dragEndLocation,
    snapshot;
 var numShapes;
function initiate() {
    numShapes = 100;
    shapes = [];
    canvas = document.getElementById('canvas');
     context = canvas.getContext('2d');
    canvas.addEventListener('mousedown', dragStart, false);
    canvas.addEventListener('mousemove', drag, false);
    canvas.addEventListener('mouseup', dragStop, false);
    canvas.addEventListener('dblclick', dblclickerase);
}
function dblclickerase(evt)
{
   var i;
		//We are going to pay attention to the layering order of the objects so that if a mouse down occurs over more than object,
		//only the topmost one will be dragged.
		var highestIndex = -1;
		
		//getting mouse position correctly, being mindful of resizing that may have occured in the browser:
		var bRect = canvas.getBoundingClientRect();
		mouseX = (evt.clientX - bRect.left)*(canvas.width/bRect.width);
		mouseY = (evt.clientY - bRect.top)*(canvas.height/bRect.height);
				
		//find which shape was clicked
		for (i=0; i < shapes.length; i++) {
			if	(hitTest(shapes[i], mouseX, mouseY)) {
				//draggingtoMove = true;
				if (i > highestIndex) {
					// here i want to delete the circle on double click but not getting logic, I can get mouse location  but how to select the circle and delete it 
				}
			}
		}
}
function getCanvasCoordinates(event) {
    var x = event.clientX - canvas.getBoundingClientRect().left,
        y = event.clientY - canvas.getBoundingClientRect().top;
    return {
        x: x,
        y: y
    };
}

function takeSnapshot() {
    snapshot = context.getImageData(0, 0, canvas.width, canvas.height);
}

function restoreSnapshot() {
    context.putImageData(snapshot, 0, 0);
}


function draw(position) {
     var radius = Math.sqrt(Math.pow((dragStartLocation.x - position.x), 2) + Math.pow((dragStartLocation.y - position.y), 2));
        var i=0;
		var tempX;
		var tempY;
		var tempRad;
		var tempR;
		var tempG;
		var tempB;
		var tempColor;
			tempRad = radius;
			tempX = dragStartLocation.x;
			tempY = dragStartLocation.y;
			tempColor = getRndColor();
			tempShape = {x:tempX, y:tempY, rad:tempRad, color:tempColor};
			shapes.push(tempShape);
			context.beginPath();
			context.arc(tempX, tempY, tempRad, 0, 2*Math.PI, false);
			//context.closePath();
            context.fillStyle = tempColor;
			context.fill();
			i++;
}

function dragStart(evt) {
    dragging = true;
    //if (dragging == true) {
        dragStartLocation = getCanvasCoordinates(evt);
        takeSnapshot();
    //}

    }

 function hitTest(shape,mx,my) {
		
		var dx;
		var dy;
		dx = mx - shape.x;
		dy = my - shape.y;
		
		//a "hit" will be registered if the distance away from the center is less than the radius of the circular object		
		return (dx*dx + dy*dy < shape.rad*shape.rad);
	}

function drag(event) {
    var position;
    if (dragging === true) {
        restoreSnapshot();
        position = getCanvasCoordinates(event);
        draw(position);
    }
}

function dragStop(event) {
    dragging = false;
    restoreSnapshot();
   var position = getCanvasCoordinates(event);
  dragEndLocation = getCanvasCoordinates(event);
    draw(position);
}

function getRndColor() {
    var r = 255 * Math.random() | 0,
        g = 255 * Math.random() | 0,
        b = 255 * Math.random() | 0;
    return 'rgb(' + r + ',' + g + ',' + b + ')';
}

function eraseCanvas() {
    context.clearRect(0, 0, canvas.width, canvas.height);
}

addEventListener("load",initiate);

<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <canvas id="canvas" width="1020" height="640"></canvas>
        <button onclick="eraseCanvas()" style="float: right;">Reset</button>
    </body>
</html>

我的问题是如何在双击时删除圆圈，我添加'dblClick'eventListener，但我仍然只能执行'clearRect' 这只会从开始和结束位置清除矩形，这有点奇怪。另一件事我无法将颜色改为白色，这将无效。点就好像我的圆圈与另一个重叠，看起来很奇怪。

Answer 1

您无法删除在画布上绘制的内容。一旦它在画布上绘制，它就会停留在那里除了读取像素数据之外你无法访问它 - 但这不会解决你的问题，因为你可以有相同颜色的重叠圆圈。

要解决此问题，您必须跟踪绘制的圆圈，并在每次需要时重新绘制完整画布（添加新圆圈，删除旧圆圈等））。这样，当你想删除一个圆圈时，你只需将它从圆圈列表中删除（一个简单的数组就可以了）。但重要的是你需要清除并重绘整个画布。

总结：在不断重新绘制画布的同时（无论是在每个刻度线上还是在用户交互发生时），您的点击“拖动”功能应该只是将圆圈添加到圆圈列表中（指定x等数据），y，半径，颜色），双击圆圈会在列表中查找该圆圈，然后将其删除。

当用户使用Javascript在屏幕上拖动鼠标创建多个圆圈时，如何删除特定圆圈

1 个答案: