如何检查 Svg 元素的交集

How to Check intersection of Svg elements

本文关键字：元素 Svg 何检查检查更新时间：2023-09-26

我正在开发一个基于Web的应用程序，用户可以在其中创建多个svg元素。所有元素都是"路径"（方形或矩形的闭合路径）。用户可以移动和旋转任何元素。

现在我想在一个元素接触或与任何其他元素相交时提醒用户。

任何帮助将不胜感激。

谢谢。

这是JSFIDDLE LINKEhttp://jsfiddle.net/nnYSp/

代码是：-

 <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>

如果您的路径是封闭的正方形或矩形，则问题会更容易。

您可以阅读 svg DOM 接口检查交叉点

布尔检查交集（在 SVGElement 元素中，在 SVGRect rect 中）;