代码如下可以直接运行，判断向量相交并求出交点坐标
<!DOCTYPE html>

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <title>判断线段相交并求交点</title>

    <style>

        .title{text-align:center;}

        .wrapper{width: 500px;height: 500px;margin: 0 auto;border: 1px solid #000000;}

        .content{position: relative;height: 500px;}

        .dot{position: absolute;width:1px;height: 1px;overflow: hidden;font-size:0;line-height: 0; background: #333;}

    </style>

</head>

<body>

<h1 class="title">判断相交并求交点</h1>

<div class="wrapper">

    <div class="content" id="content"></div>

</div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>

<script>

    //*********定义加载模块方法  start **************//

    (function (window, undefined) {

        if (window.define) {

            return

        }

        function isFunction(obj) {

            return Object.prototype.toString.call(obj) === "[object Function]"

        }

        var MM = {};

        var initModuleName = "initRun";

        function require(name) {

            if (!MM[name]) {

                throw new Error("Module " + name + " is not defined.")

            }

            var module = MM[name];

            if (module.inited === false) {

                runModule(name)

            }

            return module.ret

        }

        function runModule(name) {

            var exports = {};

            var module = MM[name];

            if (isFunction(MM[name].factory)) {

                var ret = MM[name].factory.apply(undefined, [require, exports, undefined]);

                module.ret = ret === undefined ? exports : ret

            } else {

                module.ret = MM[name].factory

            }

            module.inited = true

        }

        function define(name, deps, factory) {

            if (MM[name]) {

                throw new Error("Module " + name + " has been defined already.")

            }

            if (isFunction(deps)) {

                factory = deps

            }

            MM[name] = {factory:factory, inited:false};

            if (name === initModuleName) {

                runModule(name)

            }

        }

        window.define = define

    })(window);

    //*********定义加载模块方法 end **************//

    (function(){

        /**

         * 可以缓存的操作节点

         */

        var $dom = {

            content : $('#content')

        }

        define('Mode/drawLine',function(require){

            var drawLine = function(){};

            drawLine.prototype = {

                /**

                 * @根据两坐标画线段

                 * @param vector1

                 * @param vector2

                 */

                draw : function(vector1 ,vector2){

                    var k = (vector2.y - vector1.y)/((vector2.x - vector1.x));//求斜率k

                    var y,x ;_lineHtml = [];//用来保存xy变量坐标

                    var maxX = Math.max(vector2.x,vector1.x),

                        minX = Math.min(vector2.x,vector1.x),

                        maxY = Math.max(vector2.y,vector1.y),

                        minY = Math.min(vector2.y,vector1.y);

                    //利用长度相隔比较大的作为循环确保画的线段质量高些

                    if((maxX-minX) > (maxY - minY) || (maxX-minX) == (maxY - minY)){

                        for(var i = minX;i<maxX;i++){

                            y = k * (i -  vector1.x) +  vector1.y;

                            _lineHtml.push('<div class="dot" style="left:'+ i +'px;top:'+ y +'px"></div>');

                        }

                    }else{

                        for(var i = minY;i<maxY;i++){

                            x = (i -  vector1.y)/k +  vector1.y;

                            _lineHtml.push('<div class="dot" style="left:'+ x +'px;top:'+ i +'px"></div>');

                        }

                    }

                    $dom.content.append(_lineHtml.join('')) ;

                } ,

                /**

                 * @desc求交点坐标具体算法见http://www.cnblogs.com/rubyxie/articles/3548450.html

                 * @param vector1

                 * @param vector2

                 * @param vector3

                 * @param vector4

                 * @return {Object}交点坐标

                 */

                computeCrossVector : function (vector1 ,vector2,vector3 ,vector4){

                    var crossVector = {},

                        v1 = {"x" : vector2.x - vector1.x , "y" : vector2.y - vector1.y},

                        v2 = {"x" : vector4.x - vector3.x , "y" : vector4.y - vector3.y};

                    var product = v1.x * v2.y - v1.y * v2.x; //两向量的乘积

                    //计算二阶行列式的两个常数项

                    var const1 = vector1.x * v1.y - vector1.y * v1.x ;

                        const2 = vector3.x * v2.y - vector3.y * v2.x ;

                    crossVector.x = (const2 * v1.x - const1 * v2.x)/product;

                    crossVector.y = (const2 * v1.y - const1 * v2.y)/product;

                    return crossVector;

                }

                ,

                //向量叉乘

                crossMul: function (v1, v2) {

                    return v1.x * v2.y - v1.y * v2.x;

                }

                ,

                checkLineCross : function(vector1 ,vector2,vector3 ,vector4){

                    var v1 = {x: vector1.x - vector3.x, y: vector1.y - vector3.y},

                            v2 = {x: vector2.x - vector3.x, y: vector2.y - vector3.y},

                            v3 = {x: vector4.x - vector3.x, y: vector4.y - vector3.y},

                            v = this.crossMul(v1, v3) * this.crossMul(v2, v3),

                            v1 = {x: vector3.x - vector1.x, y: vector3.y - vector1.y},

                            v2 = {x: vector4.x - vector1.x, y: vector4.y - vector1.y},

                            v3 = {x: vector2.x - vector1.x, y: vector2.y - vector1.y};

                    return (v <= 0 && this.crossMul(v1, v3) * this.crossMul(v2, v3) <= 0) ? true : false;

                }

            };

            return drawLine;

        });

        /**

         * @desc 模块启动函数

         */

        define('initRun',function(require){

            var vector1 = {"x" :50 ,"y":100 },  //定义四个向量坐标

                vector2 = {"x" :180 ,"y":400 },

                vector3 = {"x" :10 ,"y":104 },

                vector4 = {"x" :200 ,"y":104 };

            var drawMode = require("Mode/drawLine");

            var line = new drawMode;

            line.draw(vector1,vector2);

            line.draw(vector3,vector4);

            if(line.checkLineCross(vector1,vector2,vector3,vector4)){

                var cross = line.computeCrossVector(vector1,vector2,vector3,vector4);

                $dom.content.append('<div>交点坐标为：x坐标为 '+ cross.x +  ' y坐标 ：'+cross.y+'</div>');

            }else{

                alert("这两向量线段未相交");

            }

        })

    })();

</script>

</body>

</html>

js判断向量叉点 并求出交点坐标的更多相关文章

  1. poj 1269 Intersecting Lines——叉积求直线交点坐标

    题目:http://poj.org/problem?id=1269 相关知识: 叉积求面积:https://www.cnblogs.com/xiexinxinlove/p/3708147.html什么 ...

  2. fzu 1015 土地划分（判断线段相交+求出交点+找规律）

    链接:http://acm.fzu.edu.cn/problem.php?pid=1015  Problem 1015 土地划分 Accept: 714    Submit: 1675Time Lim ...

  3. js判断文件类型大小并给出提示

    上传文件是工作中常用的功能,不同的场景对不同的文件类型和文件大小都有不同的要求: <form id="uploadForm" method="post" ...

  4. js判断软键盘是否开启弹出

    移动端关于页面布局,如果底部有position:fixed的盒子,又有input,当软键盘弹出收起都会影响页面布局.这时候Android可以监听resize事件,代码如下,而ios没有相关事件. va ...

  5. 提交Form表单,submit之前做js判断处理

    效果: 在点击提交按钮时,首先进行js判断, 如果不符合条件,则alert出提示信息,并return false. 主要点就在于给form表单添加一个onsubmit事件. 在onsubmit事件中定 ...

  6. JS 判断 Radio 单选按钮是否为选中状态 并弹出 值信息

    今天项目中所解决的问题:JS 判断 Radio 单选按钮是否为选中状态 并弹出 值信息,一开始总是获取不到 radio 的值,后来发现逻辑存在些问题,特此共享该代码留笔记 和 分享给遇到 这类问题的 ...

  7. js判断是否是ie浏览器且给出ie版本

    之前懒得写判断ie版本js,因为网上关于这方面的代码太多了,所以从网上拷贝了一个,放到项目上才发现由于时效性的问题,代码不生效.就自己写一个吧. 怎么去看浏览器的内核等信息 ---- js的全局对象w ...

  8. 快速判断&求出区间相交的长度

    有两个区间A[a1,b1], B[a2,b2],判断这两个区间有没有交集.我们可以分为两种思维来判断: /** *思路就是如果两个区间不相交,那么最大的开始端一定大于最小的结束端 **/ if(max ...

  9. 黑马基础阶段测试题：定义一个int类型的数组，数组中元素为｛5，7，3，9，4｝。求出数组中的最小值，并判断最小值是否为偶数，如果是偶数则输出“最小值为偶数”，如果不是偶数则输出“最小值为奇数”。打印如下：

    package com.swift; import java.util.Arrays; public class ArrayTest { public static void main(String[ ...

随机推荐

  1. JgrId 无数据返回设置

    在addJSONData方法中 while (i < len) { 前增加以下代码 ) { rowData.push('<tr role="row" id=" ...

  2. Fiddler关闭后打不开网页

    今天项目系统测试的时候,CS客户端的Restful请求都失败,但是实际上的服务是正常开启的,马上通过cmd指令ping了一下服务,正常:再用telnet试了一下端口,也是正常.不过随后发现在这台电脑上 ...

  3. Mycat SqlServer Do not have slave connection to use, use master connection instead

    Do not have slave connection to use, use master connection instead 很奇怪啊 都是按照配置配置的 怎么就是不通呢 有点怀疑人生了吧 其 ...

  4. Yaoge’s maximum profit HDU - 5052

    Yaoge’s maximum profit Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/ ...

  5. 【OCP-12c】2019年CUUG OCP 071考试题库（79题）

    79.Which statement is true about transactions? A. A set of Data Manipulation Language (DML) statemen ...

  6. BZOJ4283: 魔法少女伊莉雅（最短路径图+最短路径树）

    题面 传送门 题解 太长了不想写了→_→ 题解 //minamoto #include<bits/stdc++.h> #define R register #define inf 0x3f ...

  7. [Flex] 组件Tree系列 —— 作为PopUpButton的弹出菜单

    mxml: <?xml version="1.0" encoding="utf-8"?> <!--功能描述:Tree作为PopUpButton ...

  8. 【vim】搜索与替换

    1. 搜索 命令 功能 备注 * 向下搜索光标所在处的词 n下一个,N上一个 # 向上搜索光标所在处的词 同上 [+<Ctrl>+i 跳转到光标所在处的变量的声明 使用tag [+< ...

  9. Error:(1, 1) 错误: 需要class, interface或enum

    这个东西在Ideal里面报的错误,在控制台提示: Error:(1, 1) 错误: 需要class, interface或enum 网上搜到说是编码问题,我的解决方式: 把出错的文件选中复制一份,再随 ...

  10. Java文件字节流和字符流

    输入流:只能从中读取数据,不能向其写入数据. InputStream,Reader 输出流:只能向其中写入数据,不能从中读取数据. OutputStream, Writer 输入流是相对于程序而言,外 ...