0

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
4

1 に答える 1

0

結果の長方形を強制的に正方形だけにするには、長方形の 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);
于 2013-07-28T22:39:28.383 に答える