在Javascript中使用相同功能繪製矩形和正方形

Question

我想在我的程序中使用相同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 

Answer 1

要強制結果矩形是唯一一個正方形，你需要修改你的鼠標移動矩形的方法。

的修改將強制執行，這始終是真實的：

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