开发技术学习

点击不同区域触发不同事件，其中E1-E5与E6-E7是不规则，理论是上一个四边形旋转后的效果。

W1-W5与N1-N5规则图形好判断触发点是否在其中。

这张图原大小是580*518的尺寸

所以在建立canvas的时候设置了一个宽度与高度，

其次这是手机页面的图像，要考虑到不同手机尺寸的情况。

#cvs {
    max-width: 100%;
    height: auto;
}

var cvs = document.getElementById('cvs');
var img = new Image();
img.src = "images/item.png";
img.onload = function () {
    var ctx = cvs.getContext('2d');
    ctx.drawImage(this, 0, 0)
}

//多边形的各个点位置
var polygon = [
    [374, 237],
    [450, 171],
    [530, 257],
    // [460, 324],
];

var scale = 1;

var cvsWidth = $("#cvs").width();
scale = cvsWidth / 580;
console.log(scale)
//监听事件
cvs.addEventListener('click', function (e) {
    var position = getEventPosition(e);
    console.log(position);
    console.log(isInPolygon(position, polygon))
})

//注：使用这个函数，需要给Canvas元素的position设为absolute。
//要判断事件对象发生的位置，事件对象e的layerX和layerY属性表示Canvas内部坐标系中的坐标
function getEventPosition(ev){
    var x, y;
    if (ev.layerX || ev.layerX == 0) {
        x = ev.layerX;
        y = ev.layerY;
    } else if (ev.offsetX || ev.offsetX == 0) { // Opera
        x = ev.offsetX;
        y = ev.offsetY;
    }
    // return {x: x, y: y};
    return [x, y];
}

//方法来源:https://blog.csdn.net/heyangyi_19940703/article/details/78606471
function isInPolygon(checkPoint, polygonPoints) {
    var counter = 0;
    var i;
    var xinters;
    var p1, p2;
    var pointCount = polygonPoints.length;
    p1 = polygonPoints[0];

    for (i = 1; i  Math.min(p1[0], p2[0]) &&
            checkPoint[0] <= Math.max(p1[0], p2[0])
        ) {
            if (checkPoint[1] <= Math.max(p1[1], p2[1])) {
                if (p1[0] != p2[0]) {
                    xinters =
                        (checkPoint[0] - p1[0]) *
                        (p2[1] - p1[1]) /
                        (p2[0] - p1[0]) +
                        p1[1];
                    if (p1[1] == p2[1] || checkPoint[1] <= xinters) {
                        counter++;
                    }
                }
            }
        }
        p1 = p2;
    }
    if (counter % 2 == 0) {
        return false;
    } else {
        return true;
    }
}

js    判断一个点是否在一个复杂多边形的内部

算法来源：https://blog.csdn.net/heyangyi_19940703/article/details/78606471

复杂一点的算法：

https://blog.csdn.net/gf771115/article/details/42870605