【问题标题】:How can I bind a Raphael element to the mouse cursor?如何将 Raphael 元素绑定到鼠标光标?
【发布时间】:2013-08-09 01:01:50
【问题描述】:

我想创建一个元素,然后将该元素立即绑定到光标。我有移动元素的工具,但我不知道如何将它们绑定到光标而不必单击元素。我想过模拟 mousedown() 事件,但我不知道该怎么做。

对于上下文,我的最终目标是使用用户定义的端点创建一条线。用户单击一个点并创建 2 个黑色小圆圈。一个作为第一次单击的参考点,另一个将附加到光标,路径连接 2 个点。一旦用户点击另一个点,两个黑色的小圆圈都消失了,只剩下那条线。

有什么想法吗?

【问题讨论】:

  • 您可以绑定到 mousemove 以获取鼠标位置。见this question
  • @JoanCharmant 感谢您向我指出这一点。您提到的问题帮助我找到了解决方案。

标签: javascript raphael


【解决方案1】:

感谢@Joan Charmant 为我指明了正确的方向。到目前为止,这是我的解决方案。 $('#paper') 是我的画布, tempPoint 是我创建的用于绑定光标移动的圆圈。

$("#paper").mousemove(function (event)
                {
                    if(firstLinePointSelected && tempPoint!=null)
                    {
                        if (!event) var event = window.event;
                        var x=0, y=0;
                        if (event.pageX || event.pageY)     
                        {
                            x = event.pageX;
                            y = event.pageY;
                        }
                        else if (event.clientX || event.clientY)    
                        {                           
                            x = event.clientX + document.body.scrollLeft
                                + document.documentElement.scrollLeft;
                            y = event.clientY + document.body.scrollTop
                                + document.documentElement.scrollTop;
                        }

                        // subtract paper coords on page
                        tempPoint.attr("cx", x - $('#paper').offset().left);
                        tempPoint.attr("cy", y - $('#paper').offset().top);
                    }
                });

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2021-06-17
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多