9

我正在开发一个基于 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>
4

1 回答 1

3

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

你可以阅读 svg dom 接口checkIntersection

boolean checkIntersection（在 SVGElement 元素中，在 SVGRect rect 中）；

于 2014-10-18T12:10:20.423 回答