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

Dyna

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.

Unfrequented

problem now is how can we achieve the same effect with SVG? – Touchandgo

@Touchandgo you can always ask another question but it should be pretty obvious if you think it through. – Unfrequented

I've only found a complex solution. Would have though there would an easier one. Cheers – Touchandgo

Answer 2

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

Watkins

Answer 3

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])}
              />

Canonicate