代码如下可以直接运行，判断向量相交并求出交点坐标
<!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. 网络正常只有自己访问网站异常一度让你怀疑，是不是被黑了！域名解析异常是如何发生的，如何解决处理及C#编程实现一键修改Hosts文件

    首先大家要知道在浏览器上浏览虚拟主机,必须使用Hosts文件或域名系统(DNS)实现主机名到IP地址的解析.在局域网中用Hosts文件或DNS都可以,在Internet上只能用DNS了. 1.当用户输 ...

  2. C# 依赖注入 & MEF

    之前面试有问道依赖注入,因为一直是做客户端的发开发,没有接触这个,后边工作接触到了MEF,顺便熟悉一下依赖注入 详细的概念解释就不讲了,网上一大把,个人觉着依赖注入本质是为了解耦,方便扩展 依赖注入的 ...

  3. c#设计模式之装饰器模式(Decorator Pattern)

    引子 在面向对象语言中,我们常常会听到这样一句话:组合优于继承.那么该如何去理解这句话呢? 下面我将以游戏装备为模型用简单的代码去展示它 先创建一个装备的抽象类,然后创建刀枪2个具体的业务子类 pub ...

  4. SQL查询速度慢的原因分析和解决方案

    SQL查询速度慢的原因分析和解决方案 查询速度慢的原因很多,常见如下几种: 1.没有索引或者没有用到索引(这是查询慢最常见的问题,是程序设计的缺陷) 2.I/O吞吐量小,形成了瓶颈效应. 3.没有创建 ...

  5. 关于StreamReader.ReadToEnd方法

    以前写抓取网页的代码喜欢用ReadToEnd,因为简单省事,后来发现,在爬取网页的时候,如果网速很慢,ReadToEnd超时的几率很大.使用Read改写后,超时几率大大减小,完整代码如下: /// & ...

  6. 【转】Sql Server去除所有空格

    详细链接:https://shop499704308.taobao.com/?spm=a1z38n.10677092.card.11.594c1debsAGeak 1.普通空格: 前后的空格,使用LT ...

  7. [JS&Jquery]实现页面表格中相同内容的行或列合并

    详细链接:https://shop499704308.taobao.com/?spm=a1z38n.10677092.card.11.594c1debsAGeak<script type=&qu ...

  8. Cookie客户端缓存.Session.Application

    Cookie客户端缓存. 1.引言 随着浏览器的处理能力不断增强,越来越多的网站开始考虑将数据存储在「客户端」,那么久不得不谈本地存储了. 本地存储的好处: 一是避免取回数据前页面一片空白,如果不需要 ...

  9. deepin配置反向代理映射本地到公网

    这里我是用的小米球的免费ngrok 相信deepin的新用户在配置反向代理时,会感觉到一脸茫然,因为一开始我也是这样,但经过短暂的了解了deepin后,发现,其实与在Debian上配置并没有什么区别! ...

  10. Bootstrap Table使用方法详解

    http://www.jb51.net/article/89573.htm bootstrap-table使用总结 bootstrap-table是在bootstrap-table的基础上写出来的,专 ...