var p1 = new Point(1, 3); var p2 = new Point(2, 1); var p3 = new Point(2, 4); var p4 = new Point(1, 1); var equOne = getEquation(p1, p2); var equTwo = getEquation(p3, p4); // 这里斜率相同的情况刚才忘了加了 if (equOne.k == equTwo.k) { alert(false); return; }
var p1 = new Point(1, 3); var p2 = new Point(3, 1);var p3 = new Point(1, 1); var p4 = new Point(4, 4); var equOne = getEquation(p1, p2); var equTwo = getEquation(p3, p4); if(equOne.k == equTwo.k) { alert(false); } else { var focus = getFocus(equOne, equTwo);
function foo(pos1,pos2,pos3,pos4){
var k1 = (pos1.y-pos2.y)/(pos1.x-pos2.x);
var k2 = (pos3.y-pos4.y)/(pos3.x-pos4.x);
if(k1 == k2){
return false;
}
var b1 = pos1.y - k1*pos1.x;
var b2 = pos3.y - k2*pos3.x;
var x = (b2-b1)/(k1-k2);
var y = k1*x+b1;
if((x<=pos1.x && x>=pos2.x) || (x<=pos2.x && x>=pos1.x))
return {x:x,y:y};
else
return false;
}var r = foo({x:0,y:0},{x:1,y:1},{x:0,y:1},{x:1,y:0});
if(r)
alert("交点为:x:"+r.x+",y:"+r.y);
else
alert("没有交点");
</script>
<img src="images/1111.jpg" usemap="map_sample" border="0" />
<map name="map_sample">
<area shape="poly" coords="346,101,346,46" href="#" />
<area shape="poly" coords="371,79,324,68" href="#" />
</map>
<textarea rows=5 cols=10 id=tt1></textarea>
<script>
function foo(pos1,pos2,pos3,pos4){
var k1 = (pos1.y-pos2.y)/(pos1.x-pos2.x);
var k2 = (pos3.y-pos4.y)/(pos3.x-pos4.x);
if(k1 == k2){
return false;
}
var b1 = pos1.y - k1*pos1.x;
var b2 = pos3.y - k2*pos3.x;
var x = (b2-b1)/(k1-k2);
var y = k1*x+b1;
if((x<=pos1.x && x>=pos2.x) || (x<=pos2.x && x>=pos1.x))
return {x:x,y:y};
else
return false;
}var r = foo({x:346,y:101},{x:346,y:46},{x:371,y:79},{x:324,y:68});
if(r)
alert("交点为:x:"+r.x+",y:"+r.y);
else
alert("没有交点");
</script>不行呢?这两条线是相交的。它提示没有交点
首先判断d = (y2-y1)(x4-x3)-(y4-y3)(x2-x1),
若d=0,则直线AB与CD平行或重合,
若d!=0,则直线AB与CD有交点,且交点(x0,y0)为:
x0 = [(x2-x1)*(x4-x3)*(y3-y1)+(y2-y1)*(x4-x3)*x1-(y4-y3)*(x2-x1)*x3]/d
x0 = [(y2-y1)*(y4-y3)*(x3-x1)+(x2-x1)*(y4-y3)*y1-(x4-x3)*(y2-y1)*y3]/(-d)
求出交点后在判断交点是否在线段上,即判断以下的式子:
(x0-x1)*(x0-x2)<=0
(x0-x3)*(x0-x4)<=0
(y0-y1)*(y0-y2)<=0
(y0-y3)*(y0-y4)<=0
只有上面的四个式子都成立才可判定(x0,y0)是线段AB与CD的交点,否则两线段无交点请问是否用的这个方法.先按直线来算...
我JS有点笨.看不懂你写的.你写的那个相交的它也提示没有交点.
帮忙再测试一下.谢谢!!
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript"> /**
* 点类
*/
function Point(x, y) {
this.x = x;
this.y = y;
this.toString = function() {
return "x:" + this.x + "\n" + "y:" + this.y;
}
} /**
* 得到直线方程
*/
function getEquation(pointOne, pointTwo) {
var y1, y2, x1, x2;
y1 = pointOne.y;
x1 = pointOne.x;
y2 = pointTwo.y;
x2 = pointTwo.x;
var k, b;
k = (y1 - y2) / (x1 - x2);
b = y1 - k * x1;
return {
k: k,
b: b
};
} /**
* 算出焦点
*/
function getFocus(equationOne, equationTwo) {
var k1, k2, b1, b2;
k1 = equationOne.k;
b1 = equationOne.b;
k2 = equationTwo.k;
b2 = equationTwo.b;
var x, y;
x = (b2 - b1) / (k1 - k2);
y = k1 * x + b1;
return new Point(x, y);
} /**
* 计算是否在线段范围内
*/
function checkSegment(focus, p1, p2) {
if (focus == false) {
return focus;
}
var maxX, maxY, minX, minY;
if (p1.x > p2.x) {
maxX = p1.x;
minX = p2.x;
} else {
maxX = p2.x;
minX = p1.x;
} if (p1.y > p2.y) {
maxY = p1.y;
minY = p2.y;
} else {
maxY = p2.y;
minY = p1.y;
} if (focus.x > minX && focus.x < maxX && focus.y > minY && focus.y < maxY) {
return focus;
} else {
return false;
}
}
var p1 = new Point(1, 3);
var p2 = new Point(2, 1); var p3 = new Point(2, 4);
var p4 = new Point(1, 1);
var equOne = getEquation(p1, p2);
var equTwo = getEquation(p3, p4);
var focus = getFocus(equOne, equTwo);
focus = checkSegment(focus, p1, p2);
focus = checkSegment(focus, p3, p4);
alert(focus);
</script>
</head>
<body>
</body>
</html>
var p2 = new Point(2, 1); var p3 = new Point(2, 4);
var p4 = new Point(1, 1);
var equOne = getEquation(p1, p2);
var equTwo = getEquation(p3, p4); // 这里斜率相同的情况刚才忘了加了
if (equOne.k == equTwo.k) {
alert(false);
return;
}
var focus = getFocus(equOne, equTwo);
focus = checkSegment(focus, p1, p2);
focus = checkSegment(focus, p3, p4);
alert(focus);
<script>
function foo(pos1,pos2,pos3,pos4){
var x,y;
if(pos1.x==pos2.x && pos1.y != pos2.y){
if(pos3.x==pos4.x && pos3.y != pos4.y)
return false;
x = pos1.x;
var k2 = (pos3.y-pos4.y)/(pos3.x-pos4.x);
var b2 = pos3.y - k2*pos3.x;
y = k2*x+b2;
}else if(pos3.x==pos4.x && pos3.y != pos4.y){
x = pos3.x;
var k1 = (pos1.y-pos2.y)/(pos1.x-pos2.x);
var b1 = pos1.y - k1*pos2.x;
y = k1*x+b1;
}else{
var k1 = (pos1.y-pos2.y)/(pos1.x-pos2.x);
var k2 = (pos3.y-pos4.y)/(pos3.x-pos4.x);
if(k1 == k2){
return false;
}
var b1 = pos1.y - k1*pos1.x;
var b2 = pos3.y - k2*pos3.x;
x = (b2-b1)/(k1-k2);
y = k1*x+b1;
}
if((x<=pos1.x && x>=pos2.x) || (x<=pos2.x && x>=pos1.x))
return {x:x,y:y};
else
return false;
}var r = foo({x:371,y:79},{x:324,y:68},{x:346,y:101},{x:346,y:46});if(r)
alert("交点为:x:"+r.x+",y:"+r.y);
else
alert("没有交点");
</script>
var p2 = new Point(3, 1);var p3 = new Point(1, 1);
var p4 = new Point(4, 4);
var equOne = getEquation(p1, p2);
var equTwo = getEquation(p3, p4);
if(equOne.k == equTwo.k) {
alert(false);
} else {
var focus = getFocus(equOne, equTwo);
focus = checkSegment(focus, p1, p2);
focus = checkSegment(focus, p3, p4);
alert(focus);
}
你还是这样测把。html里用return 会抱错。然后你把我的方法整理到一个函数里就Okle
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
/**
* 点类
*/
function Point(x, y) {
this.x = x;
this.y = y;
this.toString = function() {
return "x:" + this.x + "\n" + "y:" + this.y;
}
}/**
* 得到直线方程
*/
function getEquation(pointOne, pointTwo) {
var y1, y2, x1, x2;
y1 = pointOne.y;
x1 = pointOne.x;
y2 = pointTwo.y;
x2 = pointTwo.x;
var k, b;
k = (y1 - y2) / (x1 - x2);
b = y1 - k * x1;
return {
k: k,
b: b
};
}/**
* 算出焦点
*/
function getFocus(equationOne, equationTwo) {
var k1, k2, b1, b2;
k1 = equationOne.k;
b1 = equationOne.b;
k2 = equationTwo.k;
b2 = equationTwo.b;
var x, y;
x = (b2 - b1) / (k1 - k2);
y = k1 * x + b1;
return new Point(x, y);
}/**
* 计算是否在线段范围内
*/
function checkSegment(focus, p1, p2) {
if (focus == false) {
return focus;
}
var maxX, maxY, minX, minY;
if (p1.x > p2.x) {
maxX = p1.x;
minX = p2.x;
} else {
maxX = p2.x;
minX = p1.x;
} if (p1.y > p2.y) {
maxY = p1.y;
minY = p2.y;
} else {
maxY = p2.y;
minY = p1.y;
} if (focus.x > minX && focus.x < maxX && focus.y > minY && focus.y < maxY) {
return focus;
} else {
return false;
}
}
var p1 = new Point(1, 3);
var p2 = new Point(3, 1);var p3 = new Point(1, 1);
var p4 = new Point(4, 4);
var equOne = getEquation(p1, p2);
var equTwo = getEquation(p3, p4);
if(equOne.k == equTwo.k) {
alert(false);
} else {
var focus = getFocus(equOne, equTwo);
focus = checkSegment(focus, p1, p2);
focus = checkSegment(focus, p3, p4);
alert(focus);
}</script>
</head>
<body></body>
</html>
完整版
根据直线方程
y = k * x + b1
先通过p1, p2,算出第一个方程的k,b
再通过p3, p4,算出第二个方程的k,b2
通过两个方程,算出焦点3
看看焦点是否在,p1,p2,p3,p4范围内
<img src="images/1111.jpg" usemap="map_sample" border="0" />
<map name="map_sample">
<area shape="poly" coords="346,101,346,46" href="#" />
<area shape="poly" coords="371,79,324,68" href="#" />
<area shape="poly" coords="346,73" href="#"></map>
<script>
function foo(pos1,pos2,pos3,pos4){
var x,y;
if(pos1.x==pos2.x && pos1.y != pos2.y){
if(pos3.x==pos4.x && pos3.y != pos4.y)
return false;
x = pos1.x;
var k2 = (pos3.y-pos4.y)/(pos3.x-pos4.x);
var b2 = pos3.y - k2*pos3.x;
y = k2*x+b2;
}else if(pos3.x==pos4.x && pos3.y != pos4.y){
x = pos3.x;
var k1 = (pos1.y-pos2.y)/(pos1.x-pos2.x);
var b1 = pos1.y - k1*pos2.x;
y = k1*x+b1;
}else{
var k1 = (pos1.y-pos2.y)/(pos1.x-pos2.x);
var k2 = (pos3.y-pos4.y)/(pos3.x-pos4.x);
if(k1 == k2){
return false;
}
var b1 = pos1.y - k1*pos1.x;
var b2 = pos3.y - k2*pos3.x;
x = (b2-b1)/(k1-k2);
y = k1*x+b1;
}
if((x<=pos1.x && x>=pos2.x) || (x<=pos2.x && x>=pos1.x))
return {x:x,y:y};
else
return false;
}var r = foo({x:371,y:79},{x:324,y:68},{x:346,y:101},{x:346,y:46});if(r)
alert("交点为:x:"+r.x+",y:"+r.y);
else
alert("没有交点");
</script>就是用的这个啊。
<area shape="poly" coords="346,101,346,46" href="#" />
<area shape="poly" coords="371,79,324,68" href="#" />
这个就是那两边线。
你用热点去点击他们的交点嘛。
然后出来的是
<area shape="poly" coords="346,73" href="#"></map>
也就是他们的交点是coords="346,73"
<area shape="poly" coords="371,79,324,68" href="#" />参数是对的哈。
1)假设直线为:y=kx+b
如果两个点的x坐标相同但y坐标不同,则方程为x=x1
否则,将两个点代入,求出k,b,得到方程;
2)同理求出第二条直线;
3)如果斜率k相同,则直线平行,无交点;
否则,求方程组的解,即交点;
4)判断是否在线段上;
done
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
/**
* 点类
*/
function Point(x, y) {
this.x = x;
this.y = y;
this.toString = function() {
return "x:" + this.x + "\n" + "y:" + this.y;
}
}/**
* 得到直线方程
*/
function getEquation(pointOne, pointTwo) {
var y1, y2, x1, x2;
y1 = pointOne.y;
x1 = pointOne.x;
y2 = pointTwo.y;
x2 = pointTwo.x;
var k, b;
if (x1 == x2) {
return {x: x1};
} else {
k = (y1 - y2) / (x1 - x2);
b = y1 - k * x1;
return {
k: k,
b: b
};
}
}/**
* 算出焦点
*/
function getFocus(equationOne, equationTwo) {
var k1, k2, b1, b2;
var x, y; if (equationOne.x && equationTwo.x) {
return false;
} else if (equationOne.x) {
k2 = equationTwo.k;
b2 = equationTwo.b;
x = equationOne.x;
y = k2 * x + b2;
} else if (equationTwo.x) {
k1 = equationOne.k;
b1 = equationOne.b;
x = equationTwo.x;
y = k1 * x + b1;
} else {
k1 = equationOne.k;
b1 = equationOne.b;
k2 = equationTwo.k;
b2 = equationTwo.b;
x = (b2 - b1) / (k1 - k2);
y = k1 * x + b1;
}
return new Point(x, y);
}/**
* 计算是否在线段范围内
*/
function checkSegment(focus, p1, p2) {
if (focus == false) {
return focus;
}
var maxX, maxY, minX, minY;
if (p1.x > p2.x) {
maxX = p1.x;
minX = p2.x;
} else {
maxX = p2.x;
minX = p1.x;
} if (p1.y > p2.y) {
maxY = p1.y;
minY = p2.y;
} else {
maxY = p2.y;
minY = p1.y;
} if (focus.x >= minX && focus.x <= maxX && focus.y >= minY && focus.y <= maxY) {
return focus;
} else {
return false;
}
}var p1 = new Point(2, 3);
var p2 = new Point(2, 1);var p3 = new Point(1, 1);
var p4 = new Point(4, 4);var equOne = getEquation(p1, p2);
var equTwo = getEquation(p3, p4);if(equOne.k == equTwo.k) {
alert(false);
} else {
var focus = getFocus(equOne, equTwo);
focus = checkSegment(focus, p1, p2);
focus = checkSegment(focus, p3, p4);
alert(focus);
}</script>
</head>
<body></body>
</html>
加入了x=N的情况,但是把无数个焦点的情况去掉了
<script>
function foo(pos1,pos2,pos3,pos4){
var x,y;
if(pos1.x==pos2.x && pos1.y != pos2.y){
if(pos3.x==pos4.x && pos3.y != pos4.y)
return false;
x = pos1.x;
var k2 = (pos3.y-pos4.y)/(pos3.x-pos4.x);
var b2 = pos3.y - k2*pos3.x;
y = k2*x+b2;
}else if(pos3.x==pos4.x && pos3.y != pos4.y){
x = pos3.x;
var k1 = (pos1.y-pos2.y)/(pos1.x-pos2.x);
var b1 = pos1.y - k1*pos1.x;
y = k1*x+b1;
alert("y="+k1+"x+"+b1);
}else{
var k1 = (pos1.y-pos2.y)/(pos1.x-pos2.x);
var k2 = (pos3.y-pos4.y)/(pos3.x-pos4.x);
if(k1 == k2){
return false;
}
var b1 = pos1.y - k1*pos1.x;
var b2 = pos3.y - k2*pos3.x;
x = (b2-b1)/(k1-k2);
y = k1*x+b1;
}
if((x<=pos1.x && x>=pos2.x) || (x<=pos2.x && x>=pos1.x))
return {x:x,y:y};
else
return false;
}var r = foo({x:371,y:79},{x:324,y:68},{x:346,y:101},{x:346,y:46});if(r)
alert("交点为:x:"+r.x+",y:"+r.y);
else
alert("没有交点");
</script>
var b1 = pos1.y - k1*pos1.x;
我写成了
var b1 = pos1.y - k1*pos2.x;
sorry..
<script>
function foo(pos1,pos2,pos3,pos4){
var x,y;
if(pos1.x==pos2.x && pos1.y != pos2.y){
if(pos3.x==pos4.x && pos3.y != pos4.y)
return false;
x = pos1.x;
var k2 = (pos3.y-pos4.y)/(pos3.x-pos4.x);
var b2 = pos3.y - k2*pos3.x;
y = k2*x+b2;
}else if(pos3.x==pos4.x && pos3.y != pos4.y){
x = pos3.x;
var k1 = (pos1.y-pos2.y)/(pos1.x-pos2.x);
var b1 = pos1.y - k1*pos1.x;
y = k1*x+b1;
}else{
var k1 = (pos1.y-pos2.y)/(pos1.x-pos2.x);
var k2 = (pos3.y-pos4.y)/(pos3.x-pos4.x);
if(k1 == k2){
return false;
}
var b1 = pos1.y - k1*pos1.x;
var b2 = pos3.y - k2*pos3.x;
x = (b2-b1)/(k1-k2);
y = k1*x+b1;
}
if((x<=pos1.x && x>=pos2.x) || (x<=pos2.x && x>=pos1.x))
return {x:x,y:y};
else
return false;
}var r = foo({x:371,y:79},{x:324,y:68},{x:346,y:101},{x:346,y:46});if(r)
alert("交点为:x:"+r.x+",y:"+r.y);
else
alert("没有交点");
</script>
大家都辛苦了哈。!!
分太少。不足表达我心中的感谢啊。
CSDN的高手确实多。
佩服。
我在我们公司都算厉害的了。
在CSDN。就是小菜了。
<img src="images/1111.jpg" width="500" height="300" usemap="#map_sample" border="0" />
<map name="map_sample" id="map_sample">
<area shape="poly" coords="284,47,270,88" href="#" />
<area shape="poly" coords="340,164,304,123" href="#" />
</map>
<script>
function foo(pos1,pos2,pos3,pos4){
var x,y;
if(pos1.x==pos2.x && pos1.y != pos2.y){
if(pos3.x==pos4.x && pos3.y != pos4.y)
return false;
x = pos1.x;
var k2 = (pos3.y-pos4.y)/(pos3.x-pos4.x);
var b2 = pos3.y - k2*pos3.x;
y = k2*x+b2;
}else if(pos3.x==pos4.x && pos3.y != pos4.y){
x = pos3.x;
var k1 = (pos1.y-pos2.y)/(pos1.x-pos2.x);
var b1 = pos1.y - k1*pos1.x;
y = k1*x+b1;
}else{
var k1 = (pos1.y-pos2.y)/(pos1.x-pos2.x);
var k2 = (pos3.y-pos4.y)/(pos3.x-pos4.x);
if(k1 == k2){
return false;
}
var b1 = pos1.y - k1*pos1.x;
var b2 = pos3.y - k2*pos3.x;
x = (b2-b1)/(k1-k2);
y = k1*x+b1;
}
if((x<=pos1.x && x>=pos2.x) || (x<=pos2.x && x>=pos1.x))
return {x:x,y:y};
else
return false;
}
//326,123,354,84
var r = foo({x:284,y:47},{x:270,y:88},{x:340,y:164},{x:304,y:123});if(r)
alert("交点为:x:"+r.x+",y:"+r.y);
else
alert("没有交点");
</script>
你看下这两个热点.
没有相交啊.
怎么还是提示交点为XXXXX.??
var x,y;
if(pos1.x==pos2.x && pos1.y != pos2.y){
if(pos3.x==pos4.x && pos3.y != pos4.y)
return false;
x = pos1.x;
var k2 = (pos3.y-pos4.y)/(pos3.x-pos4.x);
var b2 = pos3.y - k2*pos3.x;
y = k2*x+b2;
}else if(pos3.x==pos4.x && pos3.y != pos4.y){
x = pos3.x;
var k1 = (pos1.y-pos2.y)/(pos1.x-pos2.x);
var b1 = pos1.y - k1*pos1.x;
y = k1*x+b1;
}else{
var k1 = (pos1.y-pos2.y)/(pos1.x-pos2.x);
var k2 = (pos3.y-pos4.y)/(pos3.x-pos4.x);
if(k1 == k2){
return false;
}
var b1 = pos1.y - k1*pos1.x;
var b2 = pos3.y - k2*pos3.x;
x = (b2-b1)/(k1-k2);
y = k1*x+b1;
}
if(((x<=pos1.x && x>=pos2.x) || (x<=pos2.x && x>=pos1.x)) && ((x<=pos3.x && x>=pos4.x) || (x<=pos4.x && x>=pos3.x)))
return {x:x,y:y};
else
return false;
}
改成这样