Событие mousedown не является непрерывным и выполняется только один раз - PullRequest
Новая
       27

Событие mousedown не является непрерывным и выполняется только один раз

1 голос
/ 10 апреля 2020

Я пытаюсь нарисовать структуру, похожую на стену. Позвольте мне объяснить: когда происходит событие mousedown, эта ячейка становится стеной (я добавлю некоторый цвет, скажем, черный), и если событие mouseup не произойдет, все ячейки, через которые пройдет курсор, также станут стеной. В настоящее время я могу сделать только одну стену по событию mousedown. Любые предложения или советы будут высоко оценены. 

var gridCols = 60;
var gridRows = Math.floor(screen.height / 25) - 2;
gridContainer.style.left = (screen.width-25*gridCols)/screen.width * 50+"%";
var found = false;
const WALLCOLOR = "black", STARTCOLOR = "red", STOPCOLOR="green", VISITEDCOLOR="magenta",
CURRENTCOLOR="yellow"; // Try to implement arrow direction


function sleep(ms) 
{
	return new Promise(resolve => setTimeout(resolve, ms));
}

function getCell(row, col)
{
	return document.querySelector(".row:nth-child("+(row+1)+") .gridsquare:nth-child("+(col+1)+")");
}


function addWall(row, col)
{
	getCell(row, col).style.background = WALLCOLOR;
}


function genDivs(rows, cols)
{ 
	var e = document.getElementById("gridContainer");
	for(var r = 0; r < rows; r++)
	{ 
		var row = document.createElement("div"); 
		row.className = "row";
		for(var c = 0; c < cols; c++)
		{ 
			var cell = document.createElement("div"); 
			if(r == 10 && c == 20)
				cell.style.background = STARTCOLOR;
			else if(r == 10 && c == 40)
				cell.style.background = STOPCOLOR;
		    
		    cell.className = "gridsquare"; 
		    cell.addEventListener("mousedown", addWall.bind(null, r, c));
		    row.appendChild(cell); 
		} 
		e.appendChild(row); 
	}
}


function clearGrid()
{
	for(var i=0; i<20; i++) 
	{
	    for(var j=0; j<60; j++) 
	    {
	    	if(i == 10 && j == 20)
	        	getCell(i, j).style.background = STARTCOLOR;
	        else if(i == 10 && j == 40)
	        	getCell(i, j).style.background = STOPCOLOR;
	        else 
	        	getCell(i, j).style.background = "white";
	        getCell(i, j).classList.remove("animateCell");
	    }

	}
}

genDivs(20, gridCols);
console.log(found);
//dfs(11, 20);
<!DOCTYPE html>
<html>
<head>
	<style>
		#gridContainer
		{
			outline: 1px solid rgb(175, 216, 248);
			font-size: 0;
			position: absolute;
		}
		.row
		{
			
		}
		.gridsquare
		{
			width: 25px;
			height: 25px;
			box-shadow: 0 1px 0 rgb(175, 216, 248) inset, 1px 0px 0px rgb(175, 216, 248) inset;
			display: inline-block;
		}
		.begin
		{
			background-color: purple;
		}
		.end
		{
			background-color: magenta;
		}
		.animateCell
		{
			box-shadow: 0 1px 0 rgb(237, 12, 0) inset, 1px 0px 0px rgb(237, 12, 0) inset;
			background-color: yellow;
			animation-name: stretch;
			animation-duration: 1.5s; 
			animation-timing-function: ease-out; 
			animation-delay: 0;
			animation-fill-mode: none;
		}

		@keyframes stretch 
		{
			0% 
			{
				transform: scale(.0);
				background-color: red;
				border-radius: 100%;
			}
			50% 
			{
				background-color: orange;
			}
			80% 
			{
				transform: scale(1.2);
				background-color: pink;

			}
			100%
			{
				transform: scale(1)
				background-color: pink;
			}
		}
		button
		{
			position: absolute;
		}
	</style>
</head>
<body>
	<div id="gridContainer"></div>
	<!-- <button type = "button" onclick="DFSUtil(10, 20)"> Click </button> -->	
	<!-- <button type = "button" onclick="BFSUtil(10, 20)"> Click </button> -->
	<script type="text/javascript" src="HomeScript.js"></script>
	<script type="text/javascript" src="./Algorithms/DepthFirstSearch.js"></script>
	<script type="text/javascript" src="./Algorithms/BreadthFirstSearch.js"></script>

</body>
</html>

Ответы [ 2 ]

3 голосов
/ 10 апреля 2020

Вам необходимо прослушивать события mousemove после события mousedown и перед событием mouseup :), (отредактировано) 

let canvas = document.querySelector("canvas"),
  ctx = canvas.getContext("2d"),
  isDragging = false, cellSize = 25;

function drawRect(x, y, xl, yl, c) {
  ctx.fillStyle = c;
  ctx.fillRect(x, y, xl, yl);
}

function makeGrid(val, color, width, height) {
  ctx.beginPath();
  for(var x = 0; x <= height; x += val) {
    ctx.moveTo(0, x);
    ctx.lineTo(width, x);
    ctx.strokeStyle = color;
    ctx.stroke();
  }

  for(var y = 0; y <= width; y += val) {
    ctx.moveTo(y, 0);
    ctx.lineTo(y, height);
    ctx.strokeStyle = color;
    ctx.stroke();
  }
}

canvas.onmousedown = function(e) {
  let x = e.offsetX - e.offsetX % cellSize,
    y = e.offsetY - e.offsetY % cellSize;
    drawRect(x, y, cellSize, cellSize, "red");
  isDragging = true;
}

canvas.onmouseup = canvas.onmouseout = function() {
  isDragging = false;
}

canvas.onmousemove = function(e) {
  let x = e.offsetX - e.offsetX % cellSize,
    y = e.offsetY - e.offsetY % cellSize;
  if(isDragging) {
    drawRect(x, y, cellSize, cellSize, "red");
  }
}

makeGrid(cellSize, "blue", canvas.width, canvas.height);
canvas {
  box-shadow: 1px 1px 2px #ccc;
  border-radius: 5px;
  border: 2px solid blue;
}
<canvas width="300" height="200"></canvas>
1 голос
/ 10 апреля 2020

Может быть, это то, что вы ищете для рисования сетки divs 

let canvas = document.querySelector("#container"),
  isDragging = false;

canvas.onmousedown = function(e) {
  if(e.target.nodeName === "DIV" && !e.target.id) {
    e.target.className = "black";
    isDragging = true;
  }
}

canvas.onmouseup = canvas.onmouseleave = function() {
  isDragging = false;
}

document.body.ondragstart = function(e) {
  e.preventDefault();
}

canvas.onmouseover = function(e) {
  if(isDragging && e.target.nodeName === "DIV" && !e.target.id) {
    e.target.className = "black";
  }
}
* {
  box-sizing: border-box;
}
#container {
  display: flex;
  flex-wrap: wrap;
  width: 300px;
}
#container div {
  border: 1px solid cyan;
  width: 25px;
  height: 25px;
  margin-bottom: 25px;
  border-bottom: none;
}
.black {
  background-color: black;
}
<div id="container">
  <div></div><div></div><div></div><div></div>
  <div></div><div></div><div></div><div></div>
  <div></div><div></div><div></div><div></div>
  <div></div><div></div><div></div><div></div>
  <div></div><div></div><div></div><div></div>
  <div></div><div></div><div></div><div></div>
  <div></div><div></div><div></div><div></div>
  <div></div><div></div><div></div><div></div>
  <div></div><div></div><div></div><div></div>
  <div></div><div></div><div></div><div></div>
  <div></div><div></div><div></div><div></div>
  <div></div><div></div><div></div><div></div>
  <div></div><div></div><div></div><div></div>
  <div></div><div></div><div></div><div></div>
  <div></div><div></div><div></div><div></div>
  <div></div><div></div><div></div><div></div>
  <div></div><div></div><div></div><div></div>
  <div></div><div></div><div></div><div></div>
  <div></div><div></div><div></div><div></div>
  <div></div><div></div><div></div><div></div>
  <div></div><div></div><div></div><div></div>
  <div></div><div></div><div></div><div></div>
  <div></div><div></div><div></div><div></div>
  <div></div><div></div><div></div><div></div>
</div>
...