Показать сообщение отдельно
  #3 (permalink)  
Старый 28.01.2021, 19:59
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,706

Сообщение от DragonFly
Как только массив достигает значения в 16 символов, будет выполнена команда отпускания мыши.
Это как это? Вы разрабатываете устройство, которое по рукам пользователю бить будет?

Попробуйте так:
const BOX_SIDE_SIZE = 30;
const MAX_DISTANCE = 16;

const canvas = document.getElementById('TFG');
const ctx = canvas.getContext('2d');

const getKeyByCoordinates = ({x, y}) => `${x}*${y}`;
const getCoordinatesByEvent = e => ({
    x: Math.floor(e.offsetX / BOX_SIDE_SIZE),
    y: Math.floor(e.offsetY / BOX_SIDE_SIZE),
});

let coordinates = {}, 
    coordsLength = 0, 
    mouseStillPressed = false;

canvas.addEventListener('mousedown', e => {
    const eventCoordinates = getCoordinatesByEvent(e);
    
    coordinates = {
        [getKeyByCoordinates(eventCoordinates)]: eventCoordinates
    };
    coordsLength = 1;
    mouseStillPressed = true;
});

canvas.addEventListener('mousemove', e => {
    if (!mouseStillPressed || coordsLength >= MAX_DISTANCE) {
        return;
    }
    
    const eventCoordinates = getCoordinatesByEvent(e);
    const key = getKeyByCoordinates(eventCoordinates);
    
    if (!coordinates[key]) {
        coordinates[key] = eventCoordinates;
        ++coordsLength;
    }
});

canvas.addEventListener('mousemove', e => {
    mouseStillPressed = false;
});
Ответить с цитированием