Javascript 如何检查Svg元素的交集
我正在开发一个基于web的应用程序，用户可以在其中创建多个svg元素。所有元素都是“路径”（闭合路径为正方形或矩形）。用户可以移动和旋转任何元素 现在，当一个元素与其他元素接触或相交时，我想提醒用户 任何帮助都将不胜感激 谢谢 这里是jsfiddle链接 代码为：-Javascript 如何检查Svg元素的交集,javascript,svg,Javascript,Svg,我正在开发一个基于web的应用程序，用户可以在其中创建多个svg元素。所有元素都是“路径”（闭合路径为正方形或矩形）。用户可以移动和旋转任何元素 现在，当一个元素与其他元素接触或相交时，我想提醒用户 任何帮助都将不胜感激 谢谢 这里是jsfiddle链接 代码为：- <body> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="600" height="500">
<body>
<svg xmlns="http://www.w3.org/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>
文件。添加的列表器（“鼠标向下”，鼠标向下，假）；
document.addEventListener（'mousemove'，mousemove，false）；
文件。添加的列表器（'mouseup'，mouseup，false）；
var obj1_rotate_string=“rotate（45125,85）”；
var obj1_转换值={
x:10，
y:0
}
var obj2_rotate_string=“”；
var obj2_转换值={
x:10，
y:0
}
var mousedownlag=false；
var mousedown={
x:0,，
y:0
}
var targetObj={
t:空，
r:空，
obj:null
};
函数mousedown（事件）{
if（event.target.hasAttribute（'move'））{
mousedownlag=true；
mousedown.x=event.pageX；
mousedown.y=event.pageY；
var Obj=event.target.id；
如果（Obj==='obj1'）{
targetObj.obj='obj1'
}
否则{
targetObj.obj='obj2'
}
}
}
函数mousemove（事件）{
if（mousedownlag）{
var dx=event.pageX mousedown.x；
var dy=event.pageY mousedown.y；
如果（targetObj.obj==='obj1'）{
obj1_转换_值。x+=dx；
obj1_转换_值。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_转换_值。x+=dx；
obj2_转换_值。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；
}
}
函数mouseup（事件）{
mousedownlag=false；
}
布尔值（在SVGElement元素中，在SVGRect rect中） 我建议您使用raphael，然后您可以使用和的组合来编写您的逻辑…感谢您的回复，我没有使用raphael，我不能使用它，因此我需要找到使用本机Javascript和Svg的解决方案。此外，如果元素被旋转，BBOX也不能正常工作。请参阅，并注意，您可以对BBOX结果应用变换以获得“旋转的BBOX”，请参阅例如。感谢Erik的回复，我关注您的帖子，但它在firefox和chrome中不起作用getScreenBBox或getIntersectionList出现错误，即对象#没有方法“getScreenBBox”。请重试。我认为它的存在意味着它没有任何本机功能。使用checkIntersection时必须小心。rect坐标必须相对于父svg文档。但是，如果希望使用checkIntersection（el1，el2.getBBox（））检查el1和el2之间的交集，如果el2应用了一些转换，则可能会失败，因为getBBox获取的是当前坐标，而不是相对于svg的坐标