如何檢查 Svg 元素的交集

Question

我正在開發一個基於 Web 的應用程序，用戶可以在其中創建多個 svg 元素。 所有元素都是“路徑”（方形或矩形的閉合路徑）。 用戶可以移動和旋轉任何元素。

現在我想在一個元素接觸或與任何其他元素相交時提醒用戶。

任何幫助，將不勝感激。

謝謝。

這是 jsfiddle 鏈接http://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>

Answer 1

如果您的路徑是封閉的正方形或矩形，問題會更容易。

你可以閱讀 svg dom interface checkIntersection

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