svg - 是否可以在 svg 矩形中设置负宽度？

Question

我想根据鼠标移动移动矩形。请引用以下链接。

http://atomicrobotdesign.com/blog_media/draw/draw1.html

在 mousedown 事件中获取矩形开始位置并开始拖动它将在鼠标移动事件中创建矩形。但是当我移动到前一个值时(即移动到小于鼠标按下值意味着它会返回负值)所以宽度变成负值。

上面的链接是 Canvas 矩形。但我创建了具有相同逻辑的 svg 矩形。

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

怎么了？

我的代码片段。

ChartMouseDown:function(e){

//       e = this.normalizeMouseEvent(e);


      var mousedownCords=this.calMousePosition(e);
      this.mouseDownX=mousedownCords.X;
      this.mouseDownY=mousedownCords.Y;

      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)));
      this.zoomingX=true;

    },



ChartMouseMove: function (evt) {

    if( this.zoomingX)
    {

    var mouseMoveX,mouseMoveY;

     var mouseMoveCords=this.calMousePosition(evt);
      mouseMoveX=mouseMoveCords.X;
      mouseMoveY=mouseMoveCords.Y;
      $(this.ZoomAreaRect).remove();
      var width =  Math.abs(mouseMoveX - this.mouseDownX);
      var height = mouseMoveY - this.mouseDownY;
      var x;
      if(mouseMoveX > this.mouseDownX)
      x= this.mouseDownX;
      else
      x= mouseMoveX;

       this.ZoomAreaRect = document.createElementNS("http://www.w3.org/2000/svg", "rect");

        $(this.ZoomAreaRect).attr({
            'id': 'ZoomArea', 'x': x, 'y': this.model.m_AreaBounds.Y, 'width': width, 'height': this.model.m_AreaBounds.Height,
            'fill': 'gray', 'stroke-width': 1, 'stroke':'gray'
        });

       $(this.ZoomAreaRect).appendTo(this.SvgObject);

    }


 calMousePosition:function(e)
    {
     var matched = jQuery.uaMatch( navigator.userAgent );
     var browser = {};
     var mouseX,mouseY;
     if(matched.browser.toLowerCase()=="mozilla")
        {
        mouseX = (e.pageX)-  $(this.SvgObject).parent().offset().left;
        mouseY=  (e.pageY) - $(this.SvgObject).parent().offset().top;
        }
        else
        {
        mouseX =  (e.pageX +document.documentElement.scrollLeft)-$(this.SvgObject).offset().left;
        mouseY =  (e.pageY + document.documentElement.scrollTop) - $(this.SvgObject).offset().top;
        }

        return { X: mouseX, Y:mouseY};

    },

谢谢，

湿婆

Answer 1

Canvas 规范放置no restriction on width or height being negative ，所以如果它们是负数，矩形会以相反的方向绘制。

SVG 规范说，如果宽度或高度为负，则 rectangle is not drawn .

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