Drawing rectangle and square using same function in Javascript

问题

I want to draw both rectangle and square using same var rectangle in my program. I have modified the function to draw square, given modeOptions = { "Rectangle", "Square" } what needs to be added below to work for both, rectangle and square. Please suggest. Thanks

Can also see the question at : http://jsfiddle.net/farey/qP3kV/6/

var rectangle=(function() {
  var inDrag=false,downPos,upPos;
  var obj;
  // temporary length for square
  var temp;
  return {
    fillStyle: "none",
    strokeStyle: "blue",
    lineWidth: 5,
    construct: function(pos,parent) {
      obj=Object.create(parent);
      obj.minx=obj.maxx=pos.x;
      obj.miny=obj.maxy=pos.y;
      if (fillColor!="inherit")
        obj.fillStyle=fillColor;
      if (strokeColor!="inherit")
        obj.strokeStyle=strokeColor;
      if (strokeThickness!="inherit")
        obj.lineWidth=strokeThickness;
      },
    draw: function(selected) {
      ctx.beginPath();
      ctx.fillStyle=this.fillStyle;
      ctx.strokeStyle=(selected) ?
                      "gray" : this.strokeStyle;
      ctx.lineWidth=this.lineWidth;
      // making 3rd & fourth argument same for square. greater of maxx and maxy should be there

        if (this.maxx - this.minx > this.maxy - this.miny)
        {  temp = this.maxx - this.minx 
        }
        else
            temp = this.maxy - this.miny

        ctx.rect(this.minx,this.miny,temp,temp);

     // else 
     // ctx.rect(this.minx,this.miny,this.maxx - this.minx,this.maxy - this.miny )

      ctx.fill();
      if (selected) {
        ctx.moveTo(this.minx,this.miny);
        ctx.lineTo(this.maxx,this.maxy);
        ctx.moveTo(this.minx,this.maxy);
        ctx.lineTo(this.maxx,this.miny);
        }
      ctx.stroke();
      },
    mousedown: function(event) {
      downPos=event;
      rectangle.construct(downPos,drawObject[containingBox4point(downPos)]);
      inDrag=true;
      },
    mousemove: function(event) {
      if (!inDrag)
      {
        drawPrevious();
        drawCursor(event,containingBox4point(event));
        return;
      }
      upPos=event;
      if (upPos.x>downPos.x) {
        obj.minx=downPos.x;
        obj.maxx=upPos.x;
        }
      else {
        obj.minx=upPos.x;
        obj.maxx=downPos.x;
        }
      if (upPos.y>downPos.y) {
        obj.miny=downPos.y;
        obj.maxy=upPos.y;
        }
      else {
        obj.miny=upPos.y;
        obj.maxy=downPos.y;
        }
      drawPrevious();
      obj.draw(containingBox(obj)==(-1));
      drawCursor(event,containingBox4point(upPos));
      },
    mouseup: function(event) {
      // commit rectangle
      rectangle.mousemove(event);
      if (!inDrag)
        return;
      if (containingBox(obj)==(-1))
        trace("U and ur box are evil . . .");
      else
      {
        drawObject.push(obj);
        trace("Rectangle props for new box "+String(drawObject.length-1)+
          ":  filled with "+ fillColor+
          "   stroked with "+strokeColor+
          "   @ thickness "+ strokeThickness);
      }
      inDrag=false;
      drawPrevious();
      },
    mouseout: function(event) {
      inDrag=false;
      drawPrevious();
      }
    };
  })(); // rectangle

回答1:

To force the resulting rectangle to be only a square, you need to modify your rectangle mousemove method.

The modification would enforce that this is always true:

Math.abs(obj.maxx-obj.minx) ==  Math.abs(obj.maxy-obj.miny).

It’s up to you to determine how your want to enforce that result.

For example, assuming upPos is right and down from downPos:

You could let the horizontal length win:

obj.maxy = obj.miny+(obj.maxx-obj.minx);

You could let the vertical length win:

obj.maxx = obj.minx+(obj.maxy-obj.miny);

You could even let the minx/miny float to create a square:

obj.minx = obj.maxx – (obj.maxy-obj.miny);

//  or 

obj.miny= obj.maxy – (obj.maxx-obj.minx);

来源：https://stackoverflow.com/questions/17912718/drawing-rectangle-and-square-using-same-function-in-javascript