问题
我想根据鼠标移动移动一个矩形。请参阅下面的链接。

在 mousedown 事件中获取矩形开始位置并开始拖动它将在鼠标移动事件中创建矩形。但是当我移动到上一个值时（即移动到小于鼠标向下按钮的值，它将返回一个负值），宽度变为负值。

上面的链接是画布矩形。但我用相同的逻辑创建了 svg 矩形。

不支持矩形的负宽度？或者如何根据鼠标移动移动矩形？

发生了什么？

我的代码片段。

1. ChartMouseDown:function(e){
   
2. 
   
3. //       e = this.normalizeMouseEvent(e);
   
4. 
   
5. 
   
6.       var mousedownCords=this.calMousePosition(e);
   
7.       this.mouseDownX=mousedownCords.X;
   
8.       this.mouseDownY=mousedownCords.Y;
   
9. 
   
10.       this.chartMouseDownPoint= this.GetValuebyPoint(Math.abs(this.mouseDownX-this.model.m_AreaBounds.X),Math.abs(this.mouseDownY-(this.model.m_AreaBounds.Y + this.model.m_AreaBounds.Height)));
    
11.       this.zoomingX=true;
    
12. 
    
13.     },
    
14. 
    
15. 
    
16. 
    
17. ChartMouseMove: function (evt) {
    
18. 
    
19.     if( this.zoomingX)
    
20.     {
    
21. 
    
22.     var mouseMoveX,mouseMoveY;
    
23. 
    
24.      var mouseMoveCords=this.calMousePosition(evt);
    
25.       mouseMoveX=mouseMoveCords.X;
    
26.       mouseMoveY=mouseMoveCords.Y;
    
27.       $(this.ZoomAreaRect).remove();
    
28.       var width =  Math.abs(mouseMoveX - this.mouseDownX);
    
29.       var height = mouseMoveY - this.mouseDownY;
    
30.       var x;
    
31.       if(mouseMoveX > this.mouseDownX)
    
32.       x= this.mouseDownX;
    
33.       else
    
34.       x= mouseMoveX;
    
35. 
    
36.        this.ZoomAreaRect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
    
37. 
    
38.         $(this.ZoomAreaRect).attr({
    
39.             'id': 'ZoomArea', 'x': x, 'y': this.model.m_AreaBounds.Y, 'width': width, 'height': this.model.m_AreaBounds.Height,
    
40.             'fill': 'gray', 'stroke-width': 1, 'stroke':'gray'
    
41.         });
    
42. 
    
43.        $(this.ZoomAreaRect).appendTo(this.SvgObject);
    
44. 
    
45.     }
    
46. 
    
47. 
    
48. calMousePosition:function(e)
    
49.     {
    
50.      var matched = jQuery.uaMatch( navigator.userAgent );
    
51.      var browser = {};
    
52.      var mouseX,mouseY;
    
53.      if(matched.browser.toLowerCase()=="mozilla")
    
54.         {
    
55.         mouseX = (e.pageX)-  $(this.SvgObject).parent().offset().left;
    
56.         mouseY=  (e.pageY) - $(this.SvgObject).parent().offset().top;
    
57.         }
    
58.         else
    
59.         {
    
60.         mouseX =  (e.pageX +document.documentElement.scrollLeft)-$(this.SvgObject).offset().left;
    
61.         mouseY =  (e.pageY + document.documentElement.scrollTop) - $(this.SvgObject).offset().top;
    
62.         }
    
63. 
    
64.         return { X: mouseX, Y:mouseY};
    
65. 
    
66.     },

复制代码

谢谢，

湿婆

回答
如果您想在 SVG 中实现这一点，您必须确保矩形的宽度/高度始终为正并相应地计算 x/y。

问题
我想根据鼠标移动移动一个矩形。请参阅下面的链接。

在 mousedown 事件中获取矩形开始位置并开始拖动它将在鼠标移动事件中创建矩形。但是当我移动到上一个值时（即移动到小于鼠标向下按钮的值，它将返回一个负值），宽度变为负值。

上面的链接是画布矩形。但我用相同的逻辑创建了 svg 矩形。

不支持矩形的负宽度？或者如何根据鼠标移动移动矩形？

发生了什么？

我的代码片段。

1. ChartMouseDown:function(e){
   
2. 
   
3. //       e = this.normalizeMouseEvent(e);
   
4. 
   
5. 
   
6.       var mousedownCords=this.calMousePosition(e);
   
7.       this.mouseDownX=mousedownCords.X;
   
8.       this.mouseDownY=mousedownCords.Y;
   
9. 
   
10.       this.chartMouseDownPoint= this.GetValuebyPoint(Math.abs(this.mouseDownX-this.model.m_AreaBounds.X),Math.abs(this.mouseDownY-(this.model.m_AreaBounds.Y + this.model.m_AreaBounds.Height)));
    
11.       this.zoomingX=true;
    
12. 
    
13.     },
    
14. 
    
15. 
    
16. 
    
17. ChartMouseMove: function (evt) {
    
18. 
    
19.     if( this.zoomingX)
    
20.     {
    
21. 
    
22.     var mouseMoveX,mouseMoveY;
    
23. 
    
24.      var mouseMoveCords=this.calMousePosition(evt);
    
25.       mouseMoveX=mouseMoveCords.X;
    
26.       mouseMoveY=mouseMoveCords.Y;
    
27.       $(this.ZoomAreaRect).remove();
    
28.       var width =  Math.abs(mouseMoveX - this.mouseDownX);
    
29.       var height = mouseMoveY - this.mouseDownY;
    
30.       var x;
    
31.       if(mouseMoveX > this.mouseDownX)
    
32.       x= this.mouseDownX;
    
33.       else
    
34.       x= mouseMoveX;
    
35. 
    
36.        this.ZoomAreaRect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
    
37. 
    
38.         $(this.ZoomAreaRect).attr({
    
39.             'id': 'ZoomArea', 'x': x, 'y': this.model.m_AreaBounds.Y, 'width': width, 'height': this.model.m_AreaBounds.Height,
    
40.             'fill': 'gray', 'stroke-width': 1, 'stroke':'gray'
    
41.         });
    
42. 
    
43.        $(this.ZoomAreaRect).appendTo(this.SvgObject);
    
44. 
    
45.     }
    
46. 
    
47. 
    
48. calMousePosition:function(e)
    
49.     {
    
50.      var matched = jQuery.uaMatch( navigator.userAgent );
    
51.      var browser = {};
    
52.      var mouseX,mouseY;
    
53.      if(matched.browser.toLowerCase()=="mozilla")
    
54.         {
    
55.         mouseX = (e.pageX)-  $(this.SvgObject).parent().offset().left;
    
56.         mouseY=  (e.pageY) - $(this.SvgObject).parent().offset().top;
    
57.         }
    
58.         else
    
59.         {
    
60.         mouseX =  (e.pageX +document.documentElement.scrollLeft)-$(this.SvgObject).offset().left;
    
61.         mouseY =  (e.pageY + document.documentElement.scrollTop) - $(this.SvgObject).offset().top;
    
62.         }
    
63. 
    
64.         return { X: mouseX, Y:mouseY};
    
65. 
    
66.     },

复制代码

谢谢，

湿婆

回答
如果您想在 SVG 中实现这一点，您必须确保矩形的宽度/高度始终为正并相应地计算 x/y。