Как отследить нажатие по определенной границе в canvas?

Question

[martunovZheka]

Можно ли как то обозначить регион, чтобы потом отслеживать клики по определенной поверхности?

есть код

// TODO: Переписать тип данных у ctx
    /**
     * Рисует провинцию на холсте
     * @param {} ctx Контекст холста
     * @param {object} province Провинция
     */
    static drawBoundary(ctx, province) {
        const boundaryPoints = province.boundaryPoints

        ctx.beginPath()
        ctx.moveTo(boundaryPoints[0].x, boundaryPoints[0].y)

        for (let i = 1; i < boundaryPoints.length; i++) {
            ctx.lineTo(boundaryPoints[i].x, boundaryPoints[i].y)
        }
        
        ctx.closePath()
        ctx.fill()
        ctx.stroke()
    }

const province1 = [
    { x: 50, y: 10 },
    { x: 60, y: 5 },
    { x: 70, y: 15 },
    { x: 80, y: 20 },
    { x: 85, y: 30 },
    { x: 90, y: 45 },
    { x: 85, : 55 },
    { x: 70, y: 60 },
    { x: 65, y: 70 },
    { x: 50, y: 75 },
    { x: 45, y: 70 },
    { x: 40, y: 60 },
    { x: 30, y: 55 },
    { x: 25, y: 50 },
    { x: 20, y: 40 },
    { x: 15, y: 30 },
    { x: 10, y: 25 },
    { x: 5, y: 20 },
    { x: 0, y: 15 },
    { x: 5, y: 10 },
    { x: 10, y: 5 },
    { x: 15, y: 5 }
]

Нужно как то определять область (провинцию) по которой кликнул пользователь

Comments

[ksnk]

Наиболее просто -красить регионы в канвасе каждый своим цветом и брать цвет по точке клика.
Если цвета нужны всетаки "совершенно" одинаковые - можно на +-1 менять прозрачность, на +-1 менять какой-то цвет...

Answer 1

[Alexandroppolus]

самый простой вариант - проверять на вхождение точки в полигон
https://ru.algorithmica.org/cs/geometry-basic/polygons/

Answer 2

[Виктор Кожухарь]

У canvas есть прекрасный метод isPointInPath

Документация https://developer.mozilla.org/en-US/docs/Web/API/C...