9

ユーザーが複数の svg 要素を作成できる Web ベースのアプリケーションに取り組んでいます。すべての要素は「パス」です (正方形または長方形の閉じたパス)。ユーザーは任意の要素を移動および回転できます。

ある要素が他の要素に触れたり交差したりすると、ユーザーに警告したいと思います。

任意の助けをいただければ幸いです。

ありがとう。

ここに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 に答える