六子技术网首页

六子技术网

  • 网站首页
  • HTML/CSS
  • javascript
  • seo优化
  • PS美工
  • 系统安全
  • 漏洞预警
  • 编程学习
  • 原创专区
  • 【六子技术网】是一家综合技术门户,为您提供网站建设,编程开发,安全维护,漏洞预警等技术文章

    技术文章MAP

    文章

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

    日期:2019/12/13 14:50:59来源分类:javascript

    点击不同区域触发不同事件,其中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;
        }
    }


     

    本文由六子技术网小编:小熊编辑整理 - 转载请注明来源 - http://www.liuzi.net/javascript/html/4105.html

    随机推荐

    • 该分类还没有添加任何内容!
    • 该分类还没有添加任何内容!

    Copyright 2005-2019 【六子技术网】 版权所有 黑ICP备16886888号

    声明:本站所有文章来自互联网 如有异议 请联系本站管理员