欢迎来到酷客淘商城,为站长提供交易担保服务 访问移动版
站长交易首选担保平台!
酷客淘

js计算某个点是否在多边形范围内

日期: 2019-11-13 08:30:05 人气: -

点击不同区域触发不同事件,其中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    判断一个点是否在一个复杂多边形的内部