Три метода обнаружения мыши для холста HTML5, нет адекватных

Ответ 1

Если я правильно понял вопрос, вы хотите определить, когда мышь входит/оставляет фигуру на холсте, исправьте?

Если это так, то вы можете использовать простые геометрические вычисления, которые намного проще и быстрее, чем зацикливание над пиксельными данными. У вашего алгоритма рендеринга уже есть список всех видимых фигур, поэтому вы знаете положение, размер и тип каждой фигуры.

Предполагая, что у вас есть какой-то список фигур, похожий на то, что описывает @Benjammmin, вы можете перебирать видимые фигуры и делать проверки точек внутри полигона:

// Track which shape is currently under the mouse cursor, and raise
// mouse enter/leave events
function trackHoverShape(mousePos) {
    var shape;
    for (var i = 0, len = visibleShapes.length; i < len; i++) {
        shape = visibleShapes[i];
        switch (shape.type ) {
            case 'arc':
                if (pointInCircle(mousePos, shape) &&
                    _currentHoverShape !== shape) {
                        raiseEvent(_currentHoverShape, 'mouseleave');
                        _currentHoverShape = shape;
                        raiseEvent(_currentHoverShape, 'mouseenter');
                    return;
                }
                break;
            case 'rect':
                if (pointInRect(mousePos, shape) &&
                    _currentHoverShape !== shape) {
                       raiseEvent(_currentHoverShape, 'mouseleave');
                       _currentHoverShape = shape;
                       raiseEvent(_currentHoverShape, 'mouseenter');
                }
                break;
        }
    }
}

function raiseEvent(shape, eventName) {
    var handler = shape.events[eventName];
    if (handler)
        handler();
}

// Check if the distance between the point and the shape's
// center is greater than the circle radius. (Pythagorean theroem)
function pointInCircle(point, shape) {
    var distX = Math.abs(point.x - shape.center.x),
        distY = Math.abs(point.y - shape.center.y),
        dist = Math.sqrt(distX * distX + distY * distY);
    return dist < shape.radius;
}

Итак, просто вызовите trackHoverShape внутри вашего canvas mousemove, и он будет отслеживать фигуру, находящуюся под мышью.

Надеюсь, это поможет.

Ответ 2

Из комментария:

Лично я бы просто переключился на использование SVG. Это больше, чем это было сделано для. Однако, возможно, стоит посмотреть EaselJSисточник. Там метод Stage.getObjectUnderPoint() и их демо из этого, кажется, работают отлично.

Я закончил поиск источника, и библиотека использует ваш первый подход - отдельный скрытый холст для каждого объекта.

Одна идея, которая пришла на ум, заключалась в том, чтобы попытаться создать какой-то алгоритм, предназначенный для содержания, чтобы обнаруживать сглаженные пиксели и с какими формами они принадлежат. Я быстро отклонил эту идею.

У меня есть еще одна теория. Кажется, что нет способа использовать призрачные полотна, но, возможно, есть способ генерировать их только тогда, когда они необходимы.

Обратите внимание, что следующая идея - это все теоретические и непроверенные. Возможно, я мог упустить что-то, что означало бы, что этот метод не будет работать.

Наряду с рисованием объекта храните метод, в котором вы нарисовали этот объект. Затем, используя метод рисования объекта, вы можете рассчитать грубую ограничительную рамку для этого объекта. Когда вы нажимаете на холст, запустите цикл через все объекты, которые у вас есть на холсте, и извлеките те, которые ограничивающие поля перехватывают точку. Для каждого из этих выделенных объектов нарисуйте их отдельно на холсте призраков, используя ссылку метода для этого объекта. Определите, находится ли мышь над небелым пикселом, очистите холст и повторите.

В качестве примера рассмотрим два объекта. Я буду хранить методы рисования прямоугольника и круга читаемым образом.

• circ = ['beginPath', ['arc', 75, 75, 10], 'closePath', 'fill']
• rect = ['beginPath', ['rect', 150, 5, 30, 40], 'closePath', 'fill']

(Возможно, вы захотите минимизировать сохраненные данные или использовать другой синтаксис, например синтаксис SVG)

Когда я рисую эти круги в первый раз, я также буду учитывать значения размеров и использовать их для определения ограничивающего прямоугольника (Примечание: вам нужно будет компенсировать ширину штриха).

• circ = {left: 65, top: 65, right: 85, bottom: 85}
• rect = {left: 150, top: 5, right: 180, bottom: 45}

На холсте произошло событие клика. Точка мыши {x: 70, y: 80}

Циклируя через два объекта, мы обнаруживаем, что координаты мыши попадают в пределы окружности. Поэтому мы отмечаем объект круга как возможный кандидат на столкновение.

Анализируя метод рисования кругов, мы можем воссоздать его на холсте призрака, а затем проверить, попадают ли координаты мыши на небелый пиксель.

После определения, действительно ли это происходит или нет, мы можем очистить холст призрака, чтобы подготовиться к тому, чтобы на него были нарисованы все больше объектов.

Как вы можете видеть, это устраняет необходимость хранить 960 x 800 x 100 пикселей и всего 960 x 800 x2 максимум.

Эта идея лучше всего будет реализована как некоторый API для автоматической обработки данных (например, метод рисования, размеры...).