I am working on a web based application where user can create multiple svg elements. all elements are 'path' (closed path either square or rectangle). User can move and rotate any element.
Now i want to alarm user when one element touches or intersect any other element .
any help would be appreciated.
thanks.
here is the jsfiddle linke /
Code is :-
<body>
<svg xmlns="" version="1.1" width="600" height="500">
<path id="obj1" d="M 100 50 L 150 50 150 120 100 120 z" stroke="black" stroke-width="2" fill="yellow" move transform="translate(10,0) rotate(45,125,85)"/>
<path id="obj2" d="M 150 150 L 200 150 200 200 150 200 z" stroke="red" stroke-width="2" fill="black" move transform="translate(10,0)"/>
</svg>
<script type="text/javascript">
document.addEventListener('mousedown', mousedown, false);
document.addEventListener('mousemove', mousemove, false);
document.addEventListener('mouseup', mouseup, false);
var obj1_rotate_string="rotate(45,125,85)";
var obj1_translate_values={
x:10,
y:0
}
var obj2_rotate_string="";
var obj2_translate_values={
x:10,
y:0
}
var mousedownFlag=false;
var mousedown={
x:0,
y:0
}
var targetObj={
t:null,
r:null,
obj:null
};
function mousedown(event){
if(event.target.hasAttribute('move')){
mousedownFlag=true;
mousedown.x=event.pageX;
mousedown.y=event.pageY;
var Obj=event.target.id;
if(Obj==='obj1'){
targetObj.obj='obj1'
}
else{
targetObj.obj='obj2'
}
}
}
function mousemove(event){
if(mousedownFlag){
var dx=event.pageX-mousedown.x;
var dy=event.pageY-mousedown.y;
if(targetObj.obj==='obj1'){
obj1_translate_values.x+=dx;
obj1_translate_values.y+=dy;
var obj=document.getElementById(targetObj.obj);
obj.setAttribute('transform', 'translate('+ obj1_translate_values.x+','+ obj1_translate_values.y+')'+ obj1_rotate_string);
}
else if(targetObj.obj==='obj2'){
obj2_translate_values.x+=dx;
obj2_translate_values.y+=dy;
var obj=document.getElementById(targetObj.obj);
obj.setAttribute('transform', 'translate('+ obj2_translate_values.x+','+ obj2_translate_values.y+')'+ obj2_rotate_string);
}
mousedown.x=event.pageX;
mousedown.y=event.pageY;
}
}
function mouseup(event){
mousedownFlag=false;
}
</script>
</body>
I am working on a web based application where user can create multiple svg elements. all elements are 'path' (closed path either square or rectangle). User can move and rotate any element.
Now i want to alarm user when one element touches or intersect any other element .
any help would be appreciated.
thanks.
here is the jsfiddle linke http://jsfiddle/nnYSp/
Code is :-
<body>
<svg xmlns="http://www.w3/2000/svg" version="1.1" width="600" height="500">
<path id="obj1" d="M 100 50 L 150 50 150 120 100 120 z" stroke="black" stroke-width="2" fill="yellow" move transform="translate(10,0) rotate(45,125,85)"/>
<path id="obj2" d="M 150 150 L 200 150 200 200 150 200 z" stroke="red" stroke-width="2" fill="black" move transform="translate(10,0)"/>
</svg>
<script type="text/javascript">
document.addEventListener('mousedown', mousedown, false);
document.addEventListener('mousemove', mousemove, false);
document.addEventListener('mouseup', mouseup, false);
var obj1_rotate_string="rotate(45,125,85)";
var obj1_translate_values={
x:10,
y:0
}
var obj2_rotate_string="";
var obj2_translate_values={
x:10,
y:0
}
var mousedownFlag=false;
var mousedown={
x:0,
y:0
}
var targetObj={
t:null,
r:null,
obj:null
};
function mousedown(event){
if(event.target.hasAttribute('move')){
mousedownFlag=true;
mousedown.x=event.pageX;
mousedown.y=event.pageY;
var Obj=event.target.id;
if(Obj==='obj1'){
targetObj.obj='obj1'
}
else{
targetObj.obj='obj2'
}
}
}
function mousemove(event){
if(mousedownFlag){
var dx=event.pageX-mousedown.x;
var dy=event.pageY-mousedown.y;
if(targetObj.obj==='obj1'){
obj1_translate_values.x+=dx;
obj1_translate_values.y+=dy;
var obj=document.getElementById(targetObj.obj);
obj.setAttribute('transform', 'translate('+ obj1_translate_values.x+','+ obj1_translate_values.y+')'+ obj1_rotate_string);
}
else if(targetObj.obj==='obj2'){
obj2_translate_values.x+=dx;
obj2_translate_values.y+=dy;
var obj=document.getElementById(targetObj.obj);
obj.setAttribute('transform', 'translate('+ obj2_translate_values.x+','+ obj2_translate_values.y+')'+ obj2_rotate_string);
}
mousedown.x=event.pageX;
mousedown.y=event.pageY;
}
}
function mouseup(event){
mousedownFlag=false;
}
</script>
</body>
- I suggest you use raphael and then you can use a bination of raphaeljs./reference.html#Element.getBBox and raphaeljs./reference.html#Paper.getElementsByPoint to write your logic... – Arpit Agrawal Commented Sep 24, 2013 at 5:31
- thanks for the reply, I am not using raphael and i cannot use that, so i need to find solution with native Javascript and Svg. Also BBOX does'nt work correctly if element is rotated. – RashFlash Commented Sep 24, 2013 at 5:50
- See stackoverflow./questions/5396657/…, and note that you can apply transforms to the bbox result to get the "rotated bbox", see e.g my.opera./MacDev_ed/blog/getting-screen-boundingboxes-in-svg. – Erik Dahlström Commented Sep 24, 2013 at 9:32
- thanks Erik for the reply, i follow your post but it did'nt work in firefox and chrome. 'getScreenBBox' or 'getIntersectionList' is given error i.e. Object #<SVGGElement> has no method 'getScreenBBox' . – RashFlash Commented Sep 24, 2013 at 15:08
- Try this library. I think that its existence implies that there isn't any native functionality for this. – Him Commented Jan 7, 2020 at 1:42
1 Answer
Reset to default 4The problem will be easier if your paths are closed squares or rectangles.
you can read the svg dom interface checkIntersection
boolean checkIntersection(in SVGElement element, in SVGRect rect);