Is it possible to set negative width in svg rectangle?

Question

i want to move the rectangle based on mouse move. please refer below link.

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

get rectangle start position in mousedown event and start dragging it will create the rectangle in mouse move event. but when i moving to previous value (i.e moving to less than mouse down value meas it will return negative value ) so width become negative.

the above link is canvas rectangle. but i have created svg rectangle with same logic.

negative width for rectangle not supported ? or how can i move the rectangle based on mouse move ?

whats going wrong ?

My code snippet.

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};

    },

Thanks,

Siva

Answer 1

• The canvas specification places no restriction on width or height being negative, so if they were negative the rectangle would draw in the opposite direction.

• The SVG specification says that if width or height are negative then the rectangle is not drawn.

If you want to implement this in SVG you'll have to make sure the rectangles width/height are always positive and calculate the x/y accordingly.

Answer 2

If you have two coordinate arrays start and end, where (start[0],start[1]) is topleft(or bottomright) and (end[0],end[1]) is topleft(or bottom right) then this is an algorithm for drawing that rectangle, it doesn't care whether those coordinates get switched

              <rect
                fill="rgba(255,0,0,0.3)"
                x={Math.min(start[0], end[0])}
                y={Math.min(start[1], end[1])}
                width={Math.abs(start[0] - end[0])}
                height={Math.abs(start[1] - end[1])}
              />

Answer 3

you can use a polygon instead of a rect, with points as

points={`${x},${y} ${x + width},${y} ${x + width},${y + height} ${x},${y + height}`}