Question

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

上看到问题

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

Answer 1

要强制生成的矩形只是一个正方形，您需要修改矩形mousemove方法。

修改将强制执行此操作：

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

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

1 个答案: