js判断向量叉点 并求出交点坐标
<!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判断向量叉点 并求出交点坐标的更多相关文章
- poj 1269 Intersecting Lines——叉积求直线交点坐标
题目:http://poj.org/problem?id=1269 相关知识: 叉积求面积:https://www.cnblogs.com/xiexinxinlove/p/3708147.html什么 ...
- fzu 1015 土地划分（判断线段相交+求出交点+找规律）
链接:http://acm.fzu.edu.cn/problem.php?pid=1015 Problem 1015 土地划分 Accept: 714 Submit: 1675Time Lim ...
- js判断文件类型大小并给出提示
上传文件是工作中常用的功能,不同的场景对不同的文件类型和文件大小都有不同的要求: <form id="uploadForm" method="post" ...
- js判断软键盘是否开启弹出
移动端关于页面布局,如果底部有position:fixed的盒子,又有input,当软键盘弹出收起都会影响页面布局.这时候Android可以监听resize事件,代码如下,而ios没有相关事件. va ...
- 提交Form表单,submit之前做js判断处理
效果: 在点击提交按钮时,首先进行js判断, 如果不符合条件,则alert出提示信息,并return false. 主要点就在于给form表单添加一个onsubmit事件. 在onsubmit事件中定 ...
- JS 判断 Radio 单选按钮是否为选中状态 并弹出 值信息
今天项目中所解决的问题:JS 判断 Radio 单选按钮是否为选中状态 并弹出 值信息,一开始总是获取不到 radio 的值,后来发现逻辑存在些问题,特此共享该代码留笔记 和 分享给遇到 这类问题的 ...
- js判断是否是ie浏览器且给出ie版本
之前懒得写判断ie版本js,因为网上关于这方面的代码太多了,所以从网上拷贝了一个,放到项目上才发现由于时效性的问题,代码不生效.就自己写一个吧. 怎么去看浏览器的内核等信息 ---- js的全局对象w ...
- 快速判断&求出区间相交的长度
有两个区间A[a1,b1], B[a2,b2],判断这两个区间有没有交集.我们可以分为两种思维来判断: /** *思路就是如果两个区间不相交,那么最大的开始端一定大于最小的结束端 **/ if(max ...
- 黑马基础阶段测试题：定义一个int类型的数组，数组中元素为｛5，7，3，9，4｝。求出数组中的最小值，并判断最小值是否为偶数，如果是偶数则输出“最小值为偶数”，如果不是偶数则输出“最小值为奇数”。打印如下：
package com.swift; import java.util.Arrays; public class ArrayTest { public static void main(String[ ...
随机推荐
- ASP.NET2.0 Newtonsoft.Json 操作类分享
JSON 是现在比较流行的数据交互格式,NET3.0+有自带类处理JSON,2.0的话需要借助Newtonsoft.Json来完成,不然自己写的话,很麻烦. 网上搜索下载 Newtonsoft.Jso ...
- HBase – 探索HFile索引机制
本文由 网易云发布. 作者: 范欣欣 本篇文章仅限内部分享,如需转载,请联系网易获取授权. 01 HFile索引结构解析 HFile中索引结构根据索引层级的不同分为两种:single-level和m ...
- java学习笔记—ServletConfig、ServletContext接口（13）
ServletConfig是一个由Tomcat服务器在初始化Servlet的时候创建并传递进来的一个对象. 该对象主要描述的时候一个servlet的配置信息. 如: <servlet> ...
- 动态代理（CGLIB实现）
CGLIB(Code Generation Library)是一个开源项目.可以直接对类进行增强,而不需要像JDK的动态代理,需要增强的类必须实现某接口 在使用Spring框架时,因为Spring框架 ...
- sql注入实例详解（二）
前言 这篇文章就是一个最基本的SQl手工注入的过程了.基本上在sqlilabs上面的实验,如果知道了其中的全部知识点,都可以通过以下的步骤进行脱裤.下面的这个步骤也是其他的脱裤手段的基础.如果想要精通 ...
- P4842 城市旅行
题目链接 题意分析 首先存在树上的删边连边操作 所以我们使用\(LCT\)维护 然后考虑怎么维护答案 可以发现 对于一条链 我们编号为\(1,2,3,...,n\) 那么期望就是 \[\frac{a_ ...
- Springboot接口简单实现生成MySQL插入语句
Springboot接口简单实现调用接口生成MySQL插入语句 在实际测试中,有这样一个需求场景,比如:在性能压力测试中,可能需要我们事先插入数据库中一些相关联的数据. 我们在实际测试中,遇到问题,需 ...
- jquery插件制作，下拉菜单
要求输入框点击出现下拉菜单,并实现以下功能: 1.首先点击地点标签页,选择好地点: 2.自动显示相应节点标签页显示节点信息,选择好节点 3.自动显示相应的连接点,选择连接点,连接点被选中并被传送的输入 ...
- 11种绕过CDN查找真实IP方法
0x01 验证是否存在CDN 方法1: 很简单,使用各种多地 ping 的服务,查看对应 IP 地址是否唯一,如果不唯一多半是使用了CDN, 多地 Ping 网站有: http://ping.chin ...
- LinkedList简要分析
LinkedList概述 LinkedList 实现List接口,底层是双向链表,非线程安全.LinkedList还可以被当作堆栈.队列或双端队列进行操作.在JDK1.7/8 之后取消了循环,修改为双 ...