Skip to content

Instantly share code, notes, and snippets.

@thuc101

thuc101/rect_intersection.html

Created July 17, 2017 14:02
Show Gist options
  • Save thuc101/ead03524dc6be087994790caef673781 to your computer and use it in GitHub Desktop.
Save thuc101/ead03524dc6be087994790caef673781 to your computer and use it in GitHub Desktop.
Download ZIP
find intersection of two rectangle
Raw
rect_intersection.html
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
var Rec2=function(x1,y1,x2,y2){
var that={
x1:x1,y1:y1,x2:x2,y2:y2,
contains: function(x, y) {
return (this.x1 <= x) && (x <= this.x2) && (this.y1 <= y) && (y <= this.y2)
},
overlap:function(r){
x_overlap=Math.max( 0,Math.min(this.x2,r.x2) - Math.max(this.x1,r.x1) );
y_overlap=Math.max( 0,Math.min(this.y2,r.y2) - Math.max(this.y1,r.y1) );
return x_overlap * y_overlap;
},
count_contains:function(r){},
dien_tich:function(){ return (this.x2-this.x1)*(this.y2-this.y1); },
maxx:function(r){ return Math.max(this.x1,this.x2,r.x1,r.x2); },
maxy:function(r){ return Math.max(this.y1,this.y2,r.y1,r.y2); },
minx:function(r){ return Math.min(this.x1,this.x2,r.x1,r.x2); },
miny:function(r){ return Math.min(this.y1,this.y2,r.y1,r.y2); },
maxX2:function(){ return Math.max(this.x1,this.x2); },
maxY2:function(){ return Math.max(this.y1,this.y2); },
minX2:function(){ return Math.min(this.x1,this.x2); },
minY2:function(){ return Math.min(this.y1,this.y2); },
get_obj:function(){ return {x1:this.x1,y1:this.y1,x2:this.x2,y2:this.y2}; },
width:function(){ return this.x2-this.x1 },
height:function(){ return this.y2-this.y1 },
intersection:function(r){
var AminX,AminY,AmaxX,AmaxY,BminX,BminY,BmaxX,BmaxY;
AminX=this.minX2();
AminY=this.minY2();
AmaxX=this.maxX2();
AmaxY=this.maxY2();
BminX=r.minX2();
BminY=r.minY2();
BmaxX=r.maxX2();
BmaxY=r.maxY2();
var kq;
if(AminX > BmaxX) {return 0;}
if(BminX > AmaxX) {return 0;}
if(AminY > BmaxY) {return 0;}
if(BminY > AmaxY) {return 0;}
return {
x1:Math.max( AminX,BminX ),
y1:Math.max( AminY,BminY ),
x2:Math.min( AmaxX,BmaxX ),
y2:Math.min( AmaxY,BmaxY ),
}
},
intersect:function(r){//r=Rec2
if(this.overlap(r)==0){ return 0; }
var flag1=0;
var flag2=0;
var xmin,xmax,ds_y,kq;
kq=[];
xmin=this.minx(r);xmax=this.maxx(r);
ds_y=[this.y1,this.y2,r.y1,r.y2];
var old=[];
var temp=[];
for(var i=xmin;i<=xmax;i++){
old=JSON.parse(JSON.stringify(temp));
temp=[];
for(var j=0;j<ds_y.length;j++){
if( this.contains(i,ds_y[j]) && r.contains(i,ds_y[j]) ){
temp.push({ x:i,y:ds_y[j] });
}
}
if(flag1 == 0){
if( temp.length >= 2 ){
kq.push(temp);
flag1=1;
}
}else{
if( flag2==0 ){
if( temp.length < 2 ){
kq.push(old);
flag2=1;
}
}
}
}
var ax,ay,bx,by;
ax=kq[0][0].x;
ay=Math.min( kq[0][0].y,kq[0][1].y );
bx=kq[1][0].x;
by=Math.max( kq[1][0].y,kq[1][1].y );
var kq2={x1:ax,y1:ay,x2:bx,y2:by}
return kq2;
},
}
return that;
}
function draw_rec2(id, rec2,color) { //r={x1,y1,x2,y2}
if($("#"+id).length ==0 ){ $("#board").append('<div id="'+id+'" class="item">'+id+'</div>'); }
var obj=rec2.get_obj();
$("#" + id).css({
left: obj.x1,
top: obj.y1,
width: obj.x2 - obj.x1,
height: obj.y2 - obj.y1,
'background-color':color,
});
}
function draw_point(id,x,y,r,color){
if($("#"+id).length ==0 ){ $("#board").append('<div id="'+id+'" class="item">'+id+'</div>'); }
$("#" + id).css({
left: x-r,
top: y-r,
width: 2*r,
height: 2*r,
'background-color':color,
});
}
function init(){
draw_rec2("r1",r1,"red");
}
var r1=Rec2(180,50,350,130);
var r3=Rec2(0,0,0,0);
var w=70;var h=50;
init();
$("#board").mousemove(function(e) {
var offset = {
x: $(this).offset().left,
y: $(this).offset().top
};
var td = {
x: parseInt(e.pageX) - parseInt(offset.x),
y: parseInt(e.pageY) - parseInt(offset.y)
};
//var r3=Rec2(td.x,td.y,td.x+w,td.y+h);
r3.x1=td.x;
r3.y1=td.y;
r3.x2=td.x+w;
r3.y2=td.y+h;
var x1,y1,x2,y2;
x1=r3.minx(r1);
y1=r3.miny(r1);
x2=r3.maxx(r1);
y2=r3.maxy(r1);
var temp=Rec2(x1,y1,x2,y2);
$("#msg").html( JSON.stringify(td) + "dien tich :"+ r3.dien_tich() );
$("#msg1").html(
"r1 : "+JSON.stringify(r1.get_obj())+" " +
"r3 : "+JSON.stringify(r3.get_obj())
);
$("#msg2").html( ( r3.intersect(r1) == 0) ? " Ngoài nhau " : JSON.stringify (r3.intersect(r1)) );
draw_rec2("r2",r3,"green");
if(r3.overlap(r1)!=0){
var inter=r3.intersection(r1);//.intersect(r1);
var rInter=Rec2( inter.x1,inter.y1,inter.x2,inter.y2 );
draw_rec2("inter",rInter,"yellow");
draw_point("A",inter.x1,inter.y1,10,"silver");
draw_point("B",inter.x2,inter.y2,10,"silver");
}else{
if( $("#inter").length !=0 ){ $("#inter").remove(); }
if( $("#A").length !=0 ){ $("#A").remove(); }
if( $("#B").length !=0 ){ $("#B").remove(); }
}
});
function update_wh() {
$("#w").text(w);
$("#h").text(h);
}
$("button").click(function(e) {
switch (e.target.id) {
case "giam_width":
w -= 5;
break;
case "tang_width":
w += 5;
break;
case "giam_height":
h -= 5;
break;
case "tang_height":
h += 5;
break;
}
update_wh();
r3.x2=r3.x1+w;
r3.y2=r3.y1+h;
draw_rec2("r2",r3,"green");
});
});
</script>
<style>
#board {
border: 1px solid blue;
position: relative;
height: 200px;
}
.item {
border: 1px solid blue;
position: absolute;
height: 80px;
width: 80px;
opacity: 0.7;
}
</style>
</head>
<body>
width :<button id="giam_width">giảm</button><span id="w">width</span>
<button id="tang_width">Tăng</button>
<br>
height :<button id="giam_height">giảm</button><span id="h">height</span>
<button id="tang_height">Tăng</button>
<br>
msg : <span id="msg"></span><br>
msg1 : <span id="msg1"></span><br>
<div id="board">
<div id="r1" class="item">r1</div>
<div id="r2" class="item">r2</div>
</div>
kq : <span id="msg2" ></span><br>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment