如何检查 Svg 元素的交集

Question

I am working on a web based application where user can create multiple svg elements.我正在开发一个基于 Web 的应用程序，用户可以在其中创建多个 svg 元素。 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.net/nnYSp/这是 jsfiddle 链接http://jsfiddle.net/nnYSp/

Code is :-代码是：-

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

Answer 1

The problem will be easier if your paths are closed squares or rectangles.如果您的路径是封闭的正方形或矩形，问题会更容易。

you can read the svg dom interface checkIntersection你可以阅读 svg dom interface checkIntersection

boolean checkIntersection (in SVGElement element, in SVGRect rect); boolean checkIntersection （在 SVGElement 元素中，在 SVGRect 矩形中）；

如何检查 Svg 元素的交集

问题描述

1 个解决方案

解决方案1
3 2014-10-18 12:10:20

如何检查 Svg 元素的交集

问题描述

1 个解决方案

解决方案1 3 2014-10-18 12:10:20

解决方案1
3 2014-10-18 12:10:20