在Javascript中使用相同的函数绘制矩形和正方形

Drawing rectangle and square using same function in Javascript

本文关键字:绘制 函数 正方形 Javascript      更新时间:2023-09-26

我想在程序中使用相同的var rectangle绘制矩形和正方形。我已经修改了绘制正方形的函数,给了modeOptions = { "Rectangle", "Square" }下面需要添加的内容来同时处理矩形和正方形。请提出建议。感谢

也可以在以下位置查看问题: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

要强制生成的矩形仅为正方形,需要修改矩形鼠标移动方法。

修改将强制执行这一点:

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

由您决定如何执行该结果

例如,假设upPos从downPos:向右和向下

你可以让水平长度获胜:

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

你可以让垂直长度获胜:

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

你甚至可以让minx/miny浮动来创建一个正方形:

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