个人中心
gpt4 book ai didi

javascript - 如何检查 Svg 元素的交集

转载 作者：数据小太阳 更新时间：2023-10-29 05:33:37 25 4
gpt4 key购买 nike

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

最佳答案

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

可以看svg dom界面checkIntersection

bool 值 checkIntersection (在 SVGElement 元素中，在 SVGRect 矩形中)；

关于javascript - 如何检查 Svg 元素的交集，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18972825/

25 4 0
文章推荐： javascript - 缩放页面时 Firefox 输入问题
文章推荐： javascript - jQuery show() 因 last()、after() 和 "blind"效果而失败
文章推荐： javascript - 是否有与 PHP 的 include 等效的 Node.js，以便包含的代码可以访问父文件的变量？
文章推荐： javascript - 将使用 D3js 创建的 SVG 转换为 PNG
数据小太阳
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com