判断两个线段是否相交

最新推荐文章于 2023-02-01 15:03:45 发布

左岸梧桐

最新推荐文章于 2023-02-01 15:03:45 发布

阅读量1.6k

点赞数

分类专栏：练手demos 文章标签： demo

本文链接：https://blog.csdn.net/geyao2015/article/details/44179409

版权

练手demos 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

判断两个线段是否相交

昨天面试，碰到个比较有意思的问题。编码判断两个线段是否相交，无奈水平太菜，这么简单的东西居然没答上来。今天下午整理了一下，写了个实际的demo出来。权当练手吧，具体如下：

解题思路：

1.求两个线段所在直线line1，line2
2.求两条直线的交点point
3.判断point是否在线段1上(也可以判断是否在线段2)上
4.若在，则两条线段相交

具体代码：

HTML:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">
<head lang="en">
    <meta charset="UTF-8">
    <title>判断两个线段是否相交问题</title>
    <link rel="stylesheet" href="css/reset.css"/>
    <link rel="stylesheet" href="css/style.css"/>
</head>
<body>
<div class="wrap">
    <h2>判断两个线段是否相交</h2></br></br>
    <p>线段1:
        端点1的x坐标<input type="text" class="inputBtn" value="0"/>
        端点1的y坐标<input type="text" class="inputBtn" value="0"/>
        端点2的x坐标<input type="text" class="inputBtn" value="100"/>
        端点2的y坐标<input type="text" class="inputBtn" value="100"/>
    </p></br>
    <p>线段2:
        端点1的x坐标<input type="text" class="inputBtn" value="0"/>
        端点1的y坐标<input type="text" class="inputBtn" value="100"/>
        端点2的x坐标<input type="text" class="inputBtn" value="100"/>
        端点2的y坐标<input type="text" class="inputBtn" value="0"/>
    </p></br></br>
    <input type="button" value="判断是否相交" class="button" onclick="isIntersection()"/></br></br>
    <span class="result"></span></br>
    <canvas id="mycanvas"></canvas>
</div>
<script src="js/script.js"></script>
</body>
</html>

JS:

function numBewteen(x, y, z) {
    //判断x是否在y和z之间
    if ((x >= y && x <= z) || (x <= y && x >= z)) {
        return true;
    }
    else {
        return false;
    }
}

function drawLines(l11, l12, l21, l22) {
    //绘图
    var canvas = document.getElementById('mycanvas');
    var ctx = canvas.getContext('2d');
    //清空画布
    ctx.clearRect(0, 0, 300, 300);
    ctx.beginPath();
    //线段1
    ctx.moveTo(l11[0], l11[1]);
    ctx.lineTo(l12[0], l12[1]);
    //线段2
    ctx.moveTo(l21[0], l21[1]);
    ctx.lineTo(l22[0], l22[1]);
    ctx.stroke();
    ctx.closePath();


}

function isIntersection() {//判断两个线段是否相交
    var result = document.getElementsByClassName("result")[0];

    //获取两个线段的4个端点，并绘图
    var inputLines = document.getElementsByClassName("inputBtn");
    var l11 = [inputLines[0].value, inputLines[1].value],
        l12 = [inputLines[2].value, inputLines[3].value],
        l21 = [inputLines[4].value, inputLines[5].value],
        l22 = [inputLines[6].value, inputLines[7].value];
    drawLines(l11, l12, l21, l22);
    //计算两条线段所在直线的斜率和截距
    var k1 = (l11[1] - l12[1]) / (l11[0] - l12[0]);
    var k2 = (l21[1] - l22[1]) / (l21[0] - l22[0]);
    var b1 = l11[1],
        b2 = l21[1];

    //计算两条直线的焦点focus
    var point = new Array();
    point[0] = (b1 - b2) / (k2 - k1);
    point[1] = (k2 * b1 - k1 * b2) / (k2 - k1);

    //判断交点是否在线段line1上
    if (numBewteen(point[0], l11[0], l12[0])) {
        result.innerHTML = "线段相交，图示如下";
    }
    else {
        result.innerHTML = "线段不相交，图示如下";
    }
}

最后放一张界面的截图:

这里写图片描述

源码地址：

github/MyDemos

最后的话：

初步实现而已，另外水平有限还实现的太渣。以后有时间再来重构吧。

左岸梧桐

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
判断两个线段是否相交

判断两个线段是否相交昨天面试，碰到个比较有意思的问题。编码判断两个线段是否相交，无奈水平太菜，这么简单的东西居然没答上来。今天下午整理了一下，写了个实际的demo出来。权当练手吧，具体如下：解题思路：1.求两个线段所在直线line1，line2 2.求两条直线的交点point 3.判断point是否在线段1上(也可以判断是否在线段2)上 4.若在，则两条线段相交具体代码：HTML:<!DOCT
复制链接

扫一扫