JavaScript判断点是否在多边形内部并使用Canvas可视化

最新推荐文章于 2023-06-19 10:49:59 发布

Toblerone_Wind

最新推荐文章于 2023-06-19 10:49:59 发布

阅读量623

点赞数 1

分类专栏： JavaScript 文章标签： javascript html5 canvas 计算机图形学

本文链接：https://blog.csdn.net/qq_42276781/article/details/120501504

版权

JavaScript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

本文介绍了如何使用JavaScript将C++代码实现，用于判断点是否在三角形内部，并提供了实时修改点坐标及图形可视化的功能。通过计算点与多边形边的交点数量来确定点的位置，代码包含了一个简单的交互式HTML页面，可以方便地调试和验证算法。

摘要由CSDN通过智能技术生成

本文核心算法参考博客：C++ 判断点是否在多边形内部的方法_高祥xiang的博客-CSDN博客

我使用JavaScript实现了他的C++代码一下，并加了实时修改点位置和可视化的功能，便于调试

效果演示图

<!DOCTYPE html>
<html>

<head>
    <style type="text/css">
        .info {
            width: 200px;
            resize: none;
            border: none;
            cursor: pointer;
        }
        #xy{
            position: relative;
            left:20px;
        }
    </style>
</head>

<body>
    <canvas id="canvas" width="500" height="500">
    </canvas>
    <textarea class="info" id="text" readonly="readonly"></textarea>
    <div id="xy">
        A<input type="text" id="Ax" value="100" size="1">,<input type="text" id="Ay" value="150" size="1"><br>
        B<input type="text" id="Bx" value="140" size="1">,<input type="text" id="By" value="300" size="1"><br>
        C<input type="text" id="Cx" value="400" size="1">,<input type="text" id="Cy" value="200" size="1"><br>
        D<input type="text" id="Dx" value="200" size="1">,<input type="text" id="Dy" value="20" size="1"><br>
        E<input type="text" id="Ex" value="200" size="1">,<input type="text" id="Ey" value="230" size="1"><br>
        P<input type="text" id="Px" value="240" size="1">,<input type="text" id="Py" value="240" size="1"><br>
    </div>

    <script type="text/javascript">
        fresh()
        xy.onchange = fresh
        //重新计算，判断点是否在多边形内部，并在画布上重新绘制
        function fresh() {
            var Polygon = [
                [+document.getElementById("Ax").value, +document.getElementById("Ay").value],
                [+document.getElementById("Bx").value, +document.getElementById("By").value],
                [+document.getElementById("Cx").value, +document.getElementById("Cy").value],
                [+document.getElementById("Dx").value, +document.getElementById("Dy").value],
                [+document.getElementById("Ex").value, +document.getElementById("Ey").value]
            ]
            var Point = [+document.getElementById("Px").value, +document.getElementById("Py").value]
            drawPolygon(Polygon)
            drawPoint(Point)
            if (isPointInPolygon(Polygon, Point)) {
                document.getElementById("text").value = "The point is in the polygon."
            } else {
                document.getElementById("text").value = "The point is not in the polygon."
            }
        }
        //判断点是否在多边形内部
        function isPointInPolygon(Polygon, Point) {
            var CrossNum = 0
            for (let i = 0; i < Polygon.length; i++) {
                var p1 = Polygon[i], p2 = Polygon[(i + 1) % Polygon.length]
                if (p1[1] == p2[1] || Point[1] < Math.min(p1[1], p2[1]) || Point[1] >= Math.max(p1[1], p2[1])){
                    console.log("与第"+(i+1)+"条边不相交")
                    continue
                }
                var x = (Point[1] - p1[1]) * (p2[0] - p1[0]) / (p2[1] - p1[1]) + p1[0]
                if (x > Point[0]){
                    CrossNum++
                    console.log("与第"+(i+1)+"条边相交,"+"交点坐标为（"+x+","+Point[1]+")")
                }else{
                    console.log("与第"+(i+1)+"条边不相交")
                }   
            }
            return CrossNum % 2 == 1
        }
        //画多边形
        function drawPolygon(Polygon) {
            var canvas = document.getElementById("canvas")
            var ctx = canvas.getContext("2d")
            ctx.clearRect(0, 0, canvas.width, canvas.height)
            ctx.beginPath()
            ctx.moveTo(Polygon[0][0], Polygon[0][1])
            for(let i = 1; i < Polygon.length; i++){
                ctx.lineTo(Polygon[i][0], Polygon[i][1])
            }
            ctx.closePath()
            ctx.fillStyle = '#1096fc'
            ctx.fill()
            ctx.stroke()
        }
        //画点
        function drawPoint(point) {
            var canvas = document.getElementById("canvas")
            var ctx = canvas.getContext("2d")
            ctx.beginPath()
            ctx.arc(point[0], point[1], 3, 0, 2 * Math.PI)
            ctx.closePath()
            ctx.fillStyle = '#fc5531'
            ctx.fill()
            ctx.stroke()
        }
    </script>
</body>

</html>

Toblerone_Wind

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaScript判断点是否在多边形内部并使用Canvas可视化

参考文章：C++ 判断点是否在多边形内部的方法_高祥xiang的博客-CSDN博客我使用JavaScript实现了他的C++代码一下，并加了实时修改点位置和可视化的功能，便于调试效果演示图<!DOCTYPE html><html><head> <style type="text/css"> .info { width: 200px; resize: none; .
复制链接

扫一扫