Question

我想画一个像下面这样的函数的正方形。

如何修改以下功能以创建正方形。

function square() {

    var tool = this;
    this.started = false;

    this.mousedown = function (ev) {
            context.beginPath();
            context.moveTo(ev._x, ev._y);
            tool.started = true;
    };

    this.mousemove = function (ev) {
        if (tool.started && checkboxSquare.checked) {
            context.lineTo(ev._x, ev._y);
            context.stroke();
        }
    };

    this.mouseup = function (ev) {
        if (tool.started && checkboxSquare.checked) {
            tool.mousemove(ev);
            tool.started = false;
        }
    };
}

Answer 1

这是一个返工：

var Square;
(function(Square) {
  var canvas = document.body.appendChild(document.createElement("canvas"));
  canvas.style.border = "1px solid";
  canvas.width = 800;
  canvas.height = 800;
  var context = canvas.getContext("2d");
  var drawing = false;
  var square = {
    x: 0,
    y: 0,
    w: 0,
    h: 0,
    color: getColor()
  };
  var persistentSquares = [];

  function getColor() {
    return "rgb(" +
      Math.round(Math.random() * 255) + ", " +
      Math.round(Math.random() * 255) + ", " +
      Math.round(Math.random() * 255) + ")";
  }

  function draw() {
    context.clearRect(0, 0, canvas.width, canvas.height);
    for (var pSquareIndex = 0; pSquareIndex < persistentSquares.length; pSquareIndex++) {
      var pSquare = persistentSquares[pSquareIndex];
      context.fillStyle = pSquare.color;
      context.fillRect(pSquare.x, pSquare.y, pSquare.w - pSquare.x, pSquare.h - pSquare.y);
      context.strokeRect(pSquare.x, pSquare.y, pSquare.w - pSquare.x, pSquare.h - pSquare.y);
    }
    context.strokeRect(square.x, square.y, square.w - square.x, square.h - square.y);
  }
  canvas.onmousedown = function(evt) {
    square.x = evt.offsetX;
    square.y = evt.offsetY;
    square.w = evt.offsetX;
    square.h = evt.offsetY;
    drawing = true;
    requestAnimationFrame(draw);
  };
  canvas.onmousemove = function(evt) {
    if (drawing) {
      square.w = evt.offsetX;
      square.h = evt.offsetY;
      requestAnimationFrame(draw);
    }
  };

  function leave(evt) {
    if (!drawing) {
      return;
    }
    square.w = evt.offsetX;
    square.h = evt.offsetY;
    drawing = false;
    persistentSquares.push(square);
    square = {
      x: 0,
      y: 0,
      w: 0,
      h: 0,
      color: getColor()
    };
    requestAnimationFrame(draw);
  };
  canvas.onmouseup = leave;
  canvas.onmouseleave = leave;
})(Square || (Square = {}));

Answer 2

这是你的幸运日！我正在做这样的事情。如果你用它做任何事情，一定要相信我！ ;）

请注意，圆形和椭圆形仍然是正在进行的工作。

链接到JSFiddle，我将在更新程序时更新：JSFiddle

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

var mx=300;
var my=300;
var currentObject = {};

document.onmousemove = function(e){
    mx=e.pageX-8;
    my=e.pageY-8;
}
document.onmousedown = function(e){
    var obj = document.getElementById("objSel").value;
    currentObject.type=obj;
    if(obj=="Rectangle"||currentObject.type=="Square"){
    	currentObject.x=e.pageX-8;
    	currentObject.y=e.pageY-8;
    }
}
document.onmouseup = function(e){
    mx=e.pageX-8;
    my=e.pageY-8;
    objects.push(complete(currentObject));
    currentObject={};
}

var objects = [];

function render(){
    ctx.clearRect(0,0,canvas.width,canvas.height);
    ctx.beginPath();
    ctx.moveTo(mx-5,my);
    ctx.lineTo(mx+5,my);
    ctx.moveTo(mx,my-5);
    ctx.lineTo(mx,my+5);
    ctx.strokeStyle="black";
    ctx.lineWidth=2;
    ctx.stroke();
    ctx.closePath();
    if(currentObject.type=="Rectangle"){
    	ctx.beginPath();
        ctx.rect(currentObject.x,currentObject.y,mx-currentObject.x,my-currentObject.y);
        ctx.stroke();
    }
    draw(complete(currentObject));
    for(var i=0;i<objects.length;i++){
        draw(objects[i]);
    }
}
setInterval(render,5);
render();

function complete(o){
    if(o.type=="Square"){
        var sidelength = Math.max(Math.abs(mx-o.x),Math.abs(my-o.y));
        var fix = function(input){
            if(input==0){
                return 1;
            } else {
                return input;
            }
        };
    	o.length=fix(Math.sign(mx-o.x))*sidelength;
    	o.height=fix(Math.sign(my-o.y))*sidelength;
    } else if(o.type=="Rectangle"){
    	o.length=mx-o.x;
    	o.height=my-o.y;
    }
    return o;
}

function draw(o){
    if(o.type=="Square"||o.type=="Rectangle"){
    	ctx.beginPath();
        ctx.rect(o.x,o.y,o.length,o.height);
        ctx.stroke();
    }
}

<canvas id="canvas" style="border:1px solid black;" width="500" height="500">Please use a browser that supports the canvas element and make sure your Javascript is working properly.</canvas>
<br>
<span id="testing"></span>
<select id="objSel">
    <option>Square</option>
    <option>Rectangle</option>
    <option>Circle</option>
    <option>Oval</option>
</select>

JavaScript Canvas创建方块

2 个答案: