<html xmlns:v="urn:schemas-microsoft-com:vml">
<STYLE>
v\:* { Behavior: url(#default#VML) }
</STYLE>
<BODY style="margin:0;padding:0;"> <span id='sss' style='position:absolute;top:0;left:0;'> </span>
<span id='aaa' style='position:absolute;top:0;left:500;'> </span>
<v:PolyLine id='thePolygonA' CoordOrig="0,0" filled='true' Points='97,88,70,96,16,83,66,6,97,88' style='position:absolute;top:0;left:0;' fillcolor='red' onmousedown=MouseDown(this) onmousemove=MouseMove() onmouseup=MouseUp() />
<v:PolyLine id='thePolygonB' CoordOrig="0,0" filled='true' Points='109,260,207,112,246,101,230,297,109,260' style='position:absolute;top:0;left:0;' fillcolor='blue' onmousedown=MouseDown(this) onmousemove=MouseMove() onmouseup=MouseUp() /> <script LANGUAGE="javaScript">
var PolygonA=new Array(new Array(97,88),new Array(70,96),new Array(16,83),new Array(66,6),new Array(97,88));
var PolygonB=new Array(new Array(109,260),new Array(207,112),new Array(246,101),new Array(230,297),new Array(109,260) ); //用来计算的临时数组,由于数组是引用类型,所以不能克隆,只能另外准备一个。
var tempPolygonA=new Array(new Array(97,88),new Array(70,96),new Array(16,83),new Array(66,6),new Array(97,88));
var tempPolygonB=new Array(new Array(109,260),new Array(207,112),new Array(246,101),new Array(230,297),new Array(109,260) );
var Obj
function MouseDown(obj){
Obj=obj;
Obj.setCapture();
Obj.l=event.x-Obj.style.pixelLeft;
Obj.t=event.y-Obj.style.pixelTop;
}
function MouseMove(){if(Obj!=null)
{
offsetx=parseInt(event.x-Obj.l);
offsety=parseInt(event.y-Obj.t);
Obj.style.left = offsetx;
Obj.style.top = offsety;if(Obj.id=="thePolygonA")
{
for(var i=0;i<PolygonA.length;i++)
{
tempPolygonA[i][0]=PolygonA[i][0]+offsetx;
tempPolygonA[i][1]=PolygonA[i][1]+offsety;
}
}
if(Obj.id=="thePolygonB")
{
for(var j=0;j<PolygonB.length;j++)
{
tempPolygonB[j][0]=PolygonB[j][0]+offsetx;
tempPolygonB[j][1]=PolygonB[j][1]+offsety;
}
}
sss.innerHTML= tempPolygonA + "<br/>" + tempPolygonB+ "<br/>" +isCollapse(tempPolygonA,tempPolygonB)
}
}
function MouseUp(){
if(Obj!=null){
Obj.releaseCapture();
Obj=null
}
}
//alert(isPointInPolygon(222,243,PolygonB))
function isPointInLine(x,y,x1,y1,x2,y2)
{
//是否一个点向x轴的射线穿透线段,有交点
var maxY=(y1>=y2)?y1:y2;
var minY=(y1<=y2)?y1:y2;
var re=false;
if(y<=maxY && y>=minY)
{
if(x<= ( x1+(x2-x1)*(y-y1)/(y2-y1) ) )
{
re=true;
}
}
return(re);
}
//109,260,207,112,246,101,230,297,109,260
function isPointInPolygon(x,y,Polygon)
{//是否点在多边形里
var crossNum=0;
var re=true;
for(var i=0;i<Polygon.length-1;i++)
{
if(isPointInLine(x,y,Polygon[i][0],Polygon[i][1],Polygon[i+1][0],Polygon[i+1][1]))
{
crossNum++;
}
} if((crossNum % 2)==0)
{
re=false;
}
return(re);
}function isCollapse(P1,P2)
{
//是否多边形碰撞。
aaa.innerHTML="";
var re=false;
for(var i=0;i<P1.length-1;i++)
{
if(isPointInPolygon(P1[i][0],P1[i][1] ,P2))
{
aaa.innerHTML="碰撞点为:" + P1[i][0] + " " + P1[i][1]
return(true);
}
}
for(var j=0;j<P2.length-1;j++)
{if(isPointInPolygon(P2[j][0],P2[j][1] ,P1))
{
aaa.innerHTML="碰撞点为:" + P2[j][0] + " " + P2[j][1]
return(true);
}
}
return(re);
}</script>
</BODY>
</HTML>以上是别人写的,你参考吧
<STYLE>
v\:* { Behavior: url(#default#VML) }
</STYLE>
<BODY style="margin:0;padding:0;"> <span id='sss' style='position:absolute;top:0;left:0;'> </span>
<span id='aaa' style='position:absolute;top:0;left:500;'> </span>
<v:PolyLine id='thePolygonA' CoordOrig="0,0" filled='true' Points='97,88,70,96,16,83,66,6,97,88' style='position:absolute;top:0;left:0;' fillcolor='red' onmousedown=MouseDown(this) onmousemove=MouseMove() onmouseup=MouseUp() />
<v:PolyLine id='thePolygonB' CoordOrig="0,0" filled='true' Points='109,260,207,112,246,101,230,297,109,260' style='position:absolute;top:0;left:0;' fillcolor='blue' onmousedown=MouseDown(this) onmousemove=MouseMove() onmouseup=MouseUp() /> <script LANGUAGE="javaScript">
var PolygonA=new Array(new Array(97,88),new Array(70,96),new Array(16,83),new Array(66,6),new Array(97,88));
var PolygonB=new Array(new Array(109,260),new Array(207,112),new Array(246,101),new Array(230,297),new Array(109,260) ); //用来计算的临时数组,由于数组是引用类型,所以不能克隆,只能另外准备一个。
var tempPolygonA=new Array(new Array(97,88),new Array(70,96),new Array(16,83),new Array(66,6),new Array(97,88));
var tempPolygonB=new Array(new Array(109,260),new Array(207,112),new Array(246,101),new Array(230,297),new Array(109,260) );
var Obj
function MouseDown(obj){
Obj=obj;
Obj.setCapture();
Obj.l=event.x-Obj.style.pixelLeft;
Obj.t=event.y-Obj.style.pixelTop;
}
function MouseMove(){if(Obj!=null)
{
offsetx=parseInt(event.x-Obj.l);
offsety=parseInt(event.y-Obj.t);
Obj.style.left = offsetx;
Obj.style.top = offsety;if(Obj.id=="thePolygonA")
{
for(var i=0;i<PolygonA.length;i++)
{
tempPolygonA[i][0]=PolygonA[i][0]+offsetx;
tempPolygonA[i][1]=PolygonA[i][1]+offsety;
}
}
if(Obj.id=="thePolygonB")
{
for(var j=0;j<PolygonB.length;j++)
{
tempPolygonB[j][0]=PolygonB[j][0]+offsetx;
tempPolygonB[j][1]=PolygonB[j][1]+offsety;
}
}
sss.innerHTML= tempPolygonA + "<br/>" + tempPolygonB+ "<br/>" +isCollapse(tempPolygonA,tempPolygonB)
}
}
function MouseUp(){
if(Obj!=null){
Obj.releaseCapture();
Obj=null
}
}
//alert(isPointInPolygon(222,243,PolygonB))
function isPointInLine(x,y,x1,y1,x2,y2)
{
//是否一个点向x轴的射线穿透线段,有交点
var maxY=(y1>=y2)?y1:y2;
var minY=(y1<=y2)?y1:y2;
var re=false;
if(y<=maxY && y>=minY)
{
if(x<= ( x1+(x2-x1)*(y-y1)/(y2-y1) ) )
{
re=true;
}
}
return(re);
}
//109,260,207,112,246,101,230,297,109,260
function isPointInPolygon(x,y,Polygon)
{//是否点在多边形里
var crossNum=0;
var re=true;
for(var i=0;i<Polygon.length-1;i++)
{
if(isPointInLine(x,y,Polygon[i][0],Polygon[i][1],Polygon[i+1][0],Polygon[i+1][1]))
{
crossNum++;
}
} if((crossNum % 2)==0)
{
re=false;
}
return(re);
}function isCollapse(P1,P2)
{
//是否多边形碰撞。
aaa.innerHTML="";
var re=false;
for(var i=0;i<P1.length-1;i++)
{
if(isPointInPolygon(P1[i][0],P1[i][1] ,P2))
{
aaa.innerHTML="碰撞点为:" + P1[i][0] + " " + P1[i][1]
return(true);
}
}
for(var j=0;j<P2.length-1;j++)
{if(isPointInPolygon(P2[j][0],P2[j][1] ,P1))
{
aaa.innerHTML="碰撞点为:" + P2[j][0] + " " + P2[j][1]
return(true);
}
}
return(re);
}</script>
</BODY>
</HTML>以上是别人写的,你参考吧
svg现在还没有很多浏览器支持
用javascript画图只能通过绘制html结点实现,而且性能差