Estoy tratando de crear un sistema de selección para una imagen de mapa de mosaicos. La imagen se agrega y cada vez que un usuario selecciona un mosaico y mueve el mouse para seleccionar varios mosaicos, el contenedor de selección aumenta de tamaño con incrementos del tamaño del mosaico.

De alguna manera, esto crea un efecto de parpadeo cuando se mantiene presionado el botón del mouse y se mueve. ¿Qué causa este problema?

 var tilesetImageContainer = document.getElementById("tileMapContainer"); var tileSize = 32; let startSelection = []; var selectionWidth = 32; var selectionHeight = 32; let endSelection = []; function getCoordinates(e) { const { x, y } = e.target.getBoundingClientRect(); const mouseX = e.clientX - x; const mouseY = e.clientY - y; return [Math.floor(mouseX / tileSize), Math.floor(mouseY / tileSize)]; } const mouseDownHandler = function (e) { if (e.which === 1) { e.preventDefault(); selectedTileMapPositions = []; tileMapSelector.style.width = tileSize + "px"; tileMapSelector.style.height = tileSize + "px"; tilesetImageContainer.style.cursor = 'crosshair'; tilesetImageContainer.style.userSelect = 'none'; startSelection = getCoordinates(e); tileMapSelector.style.left = startSelection[0] * tileSize + "px"; tileMapSelector.style.top = startSelection[1] * tileSize + "px"; tilesetImageContainer.addEventListener('mousemove', mouseMoveSelectionHandler); tilesetImageContainer.addEventListener('mouseup', mouseUpSelectionHandler); } }; const mouseMoveSelectionHandler = function (e) { currentPositionCoordinates = getCoordinates(e); endSelection = getCoordinates(e); if (currentPositionCoordinates[0] > startSelection[0] || currentPositionCoordinates[1] < startSelection[1]) { // selected more then 1 tile selectionWidth = ((currentPositionCoordinates[0] - startSelection[0]) * tileSize); selectionHeight = ((currentPositionCoordinates[1] - startSelection[1]) * tileSize); } tileMapSelector.style.width = selectionWidth + tileSize + "px"; tileMapSelector.style.height = selectionHeight + tileSize + "px"; console.log("start: " + startSelection); console.log("current: " + currentPositionCoordinates); }; const mouseUpSelectionHandler = function (e) { for (var x = startSelection[0]; x <= endSelection[0]; x++) { for (var y = startSelection[1]; y <= endSelection[1]; y++) { selectedTileMapPositions.push([x,y]); } } console.log(selectedTileMapPositions); tilesetImageContainer.removeEventListener('mousemove', mouseMoveSelectionHandler); tilesetImageContainer.removeEventListener('mouseup', mouseUpSelectionHandler); tilesetImageContainer.style.cursor = 'default'; tilesetImageContainer.style.removeProperty('user-select'); startSelection = []; endSelection = []; }; tilesetImageContainer.addEventListener('mousedown', mouseDownHandler);

Aquí hay un JsFiddle: https://jsfiddle.net/6kv3pj1n/19/