javascript - 如何停止多个正在运行的鼠标事件函数

Question

我想通过从角落移动鼠标来调整画布上绘制的正方形（通过单击创建）的大小。只应调整选定正方形的大小。我对每个角有四种不同的功能，并且在从多个角调整大小后，功能会继续执行。如何防止这种情况？

var isMouseDown = false;
var canvas;
var ctx, size;

$(document).ready(function() {
  canvas = $('#area')[0];
  ctx = canvas.getContext('2d');
  $('#area').on('mousedown', canvasClick);
  $('#area').on('mouseup', up);
});

function up(event) {
  isMouseDown = false;
  resizing = false;

  console.log("up");
  return;
}

function Square(x, y, size) {
  this.x = x;
  this.y = y;
  this.size = size;
  this.isSelected = false;
}

var x, y;

function addSquare(event) {
  x = event.pageX - canvas.offsetLeft;
  y = event.pageY - canvas.offsetTop;
  var size = parseInt(Math.random() * 81 + 49);
  x -= size / 2;
  y -= size / 2;
  ctx.fillRect(x, y, size, size);
  var square = new Square(x, y, size);
  squares.push(square);
  drawSquares();
}

var squares = new Array;
var previousSelectedSquare;

function drawSquares() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  for (var i = 0; i < squares.length; i++) {
    var Square = squares[i];
    ctx.beginPath();
    ctx.fillStyle = "orange";
    ctx.rect(Square.x, Square.y, Square.size, Square.size);
    ctx.strokeStyle = "black";
    if (Square.isSelected) {
      ctx.lineWidth = 4;
    } else {
      ctx.lineWidth = 1;
    }
    ctx.fill();
    ctx.stroke();
  }
}

function canvasClick(event) {
  isMouseDown = true;
  x = event.pageX - canvas.offsetLeft;
  y = event.pageY - canvas.offsetTop;
  if (squares.length < 1) {
    addSquare(event);
    return;
  }

  var Square;
  if (previousSelectedSquare) {
    var prevX = previousSelectedSquare.x;
    var prevY = previousSelectedSquare.y;
    size = previousSelectedSquare.size;
  }

  var change = 7;
  if (((x <= prevX + size + change) && (x >= prevX + size - change)) ||
    ((x >= prevX - change) && (x <= prevX + change)))
    if (((y <= prevY + size + change) && (y >= prevY + size - change)) ||
      ((y <= prevY + change) && (y >= prevY - change))) {
      console.log("borders");
      $('#area').on('mousemove', resize(event));
      return;
    }

  for (var i = squares.length - 1; i >= 0; i--) {
    Square = squares[i];
    if ((x >= Square.x && x <= Square.x + Square.size) && (y <= Square.y + Square.size && y >= Square.y)) {
      Square.isSelected = true;
      if (previousSelectedSquare != null)
        previousSelectedSquare.isSelected = false;
      if (previousSelectedSquare == Square)
        previousSelectedSquare = null;
      else
        previousSelectedSquare = Square;
      drawSquares();
      return;
    }
    if (i === 0) {
      addSquare(event);
      return;
    }
  }
  return;
}

// Part that resizes

var resizing = false;

function resize(event) {
  if (!isMouseDown)
    return;
  resizing = true;
  x = (event.pageX - canvas.offsetLeft);
  y = (event.pageY - canvas.offsetTop);
  size = previousSelectedSquare.size;
  var centreX = previousSelectedSquare.x + size / 2;
  var centreY = previousSelectedSquare.y + size / 2;

  if (x > centreX && y < centreY) {
    topr = true;
    //top right
    $('#area').on('mousemove', topR);
    return;
  }
  if (x < centreX && y < centreY) {
    //top left
    $('#area').on('mousemove', topL);
    return;
  }
  if (x > centreX && y > centreY) {
    //bot right
    $('#area').on('mousemove', botR);
    return;
  }
  if (x < centreX && y > centreY) {
    //bot left
    $('#area').on('mousemove', botL);
    return;
  }
  resizing = false;
  return;
}

function topR(event) {
  if (!resizing || !isMouseDown)
    return;
  $('#area').on('mouseup', up);
  console.log("top right");
  size = previousSelectedSquare.size;
  var yb = previousSelectedSquare.y + size;
  if (parseInt(yb - (event.pageY - canvas.offsetTop)) < 60)
    return;
  previousSelectedSquare.size = parseInt(yb - (event.pageY - canvas.offsetTop));
  previousSelectedSquare.y = parseInt(event.pageY - canvas.offsetTop);
  drawSquares();
  return;
}

function topL(event) {
  if (!resizing || !isMouseDown)
    return;
  $('#area').on('mouseup', up);
  console.log("top left");
  x = previousSelectedSquare.x + previousSelectedSquare.size;
  y = previousSelectedSquare.y + previousSelectedSquare.size;
  if (parseInt(y - (event.pageY - canvas.offsetTop)) < 60)
    return;
  previousSelectedSquare.size = parseInt(y - (event.pageY - canvas.offsetTop));
  previousSelectedSquare.y = parseInt(event.pageY - canvas.offsetTop);
  previousSelectedSquare.x = parseInt(event.pageX - canvas.offsetLeft);
  drawSquares();
  return;
}

function botR(event) {
  if (!resizing || !isMouseDown)
    return;
  $('#area').on('mouseup', up);
  console.log("bot right");
  size = previousSelectedSquare.size;
  if ((event.pageX - canvas.offsetLeft - previousSelectedSquare.x + size) / 2 < 60)
    return;
  previousSelectedSquare.size = parseInt((event.pageX - canvas.offsetLeft - previousSelectedSquare.x + size) / 2);
  drawSquares();
  return;
}

function botL(event) {
  if (!resizing || !isMouseDown)
    return;
  $('#area').on('mouseup', up);
  console.log("bot left");
  var xr = previousSelectedSquare.x + previousSelectedSquare.size;
  if (xr - event.pageX - canvas.offsetLeft < 60)
    return;
  previousSelectedSquare.size = parseInt(previousSelectedSquare.x + previousSelectedSquare.size - (event.pageX - canvas.offsetLeft));
  previousSelectedSquare.x = parseInt(event.pageX - canvas.offsetLeft);
  drawSquares();
  return;
}

#area {
  margin-top: 0;
  border: 4px black solid;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<canvas id="area" width="1250" height="550"></canvas>

标签： javascriptjqueryhtml5-canvas

Answer 1

使用命名空间事件，检查位置后，删除其他处理程序，然后为当前角添加一个。

例如：$('#area').off('mousemove.botR').off('mousemove.topL').off('mousemove.botL').on('mousemove.topR', topR);

var isMouseDown = false;
var canvas;
var ctx, size;

$(document).ready(function() {
  canvas = $('#area')[0];
  ctx = canvas.getContext('2d');
  $('#area').on('mousedown', canvasClick);
  $('#area').on('mouseup', up);
});

function up(event) {
  isMouseDown = false;
  resizing = false;

  console.log("up");
  return;
}

function Square(x, y, size) {
  this.x = x;
  this.y = y;
  this.size = size;
  this.isSelected = false;
}

var x, y;

function addSquare(event) {
  x = event.pageX - canvas.offsetLeft;
  y = event.pageY - canvas.offsetTop;
  var size = parseInt(Math.random() * 81 + 49);
  x -= size / 2;
  y -= size / 2;
  ctx.fillRect(x, y, size, size);
  var square = new Square(x, y, size);
  squares.push(square);
  drawSquares();
}

var squares = new Array;
var previousSelectedSquare;

function drawSquares() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  for (var i = 0; i < squares.length; i++) {
    var Square = squares[i];
    ctx.beginPath();
    ctx.fillStyle = "orange";
    ctx.rect(Square.x, Square.y, Square.size, Square.size);
    ctx.strokeStyle = "black";
    if (Square.isSelected) {
      ctx.lineWidth = 4;
    } else {
      ctx.lineWidth = 1;
    }
    ctx.fill();
    ctx.stroke();
  }
}

function canvasClick(event) {
  isMouseDown = true;
  x = event.pageX - canvas.offsetLeft;
  y = event.pageY - canvas.offsetTop;
  if (squares.length < 1) {
    addSquare(event);
    return;
  }

  var Square;
  if (previousSelectedSquare) {
    var prevX = previousSelectedSquare.x;
    var prevY = previousSelectedSquare.y;
    size = previousSelectedSquare.size;
  }

  var change = 7;
  if (((x <= prevX + size + change) && (x >= prevX + size - change)) ||
    ((x >= prevX - change) && (x <= prevX + change)))
    if (((y <= prevY + size + change) && (y >= prevY + size - change)) ||
      ((y <= prevY + change) && (y >= prevY - change))) {
      console.log("borders");
      $('#area').on('mousemove', resize(event));
      return;
    }

  for (var i = squares.length - 1; i >= 0; i--) {
    Square = squares[i];
    if ((x >= Square.x && x <= Square.x + Square.size) && (y <= Square.y + Square.size && y >= Square.y)) {
      Square.isSelected = true;
      if (previousSelectedSquare != null)
        previousSelectedSquare.isSelected = false;
      if (previousSelectedSquare == Square)
        previousSelectedSquare = null;
      else
        previousSelectedSquare = Square;
      drawSquares();
      return;
    }
    if (i === 0) {
      addSquare(event);
      return;
    }
  }
  return;
}

// Part that resizes

var resizing = false;

function resize(event) {
  if (!isMouseDown)
    return;
  resizing = true;
  x = (event.pageX - canvas.offsetLeft);
  y = (event.pageY - canvas.offsetTop);
  size = previousSelectedSquare.size;
  var centreX = previousSelectedSquare.x + size / 2;
  var centreY = previousSelectedSquare.y + size / 2;

  if (x > centreX && y < centreY) {
topr = true;
//top right
$('#area').off('mousemove.botR').off('mousemove.topL').off('mousemove.botL').on('mousemove.topR', topR);
return;
  }
  

if (x < centreX && y < centreY) {
    //top left
    $('#area').off('mousemove.topR').off('mousemove.botL').off('mousemove.botR').on('mousemove.topL', topL);
    return;
  }
  if (x > centreX && y > centreY) {
    //bot right
    $('#area').off('mousemove.topR').off('mousemove.topL').off('mousemove.botL').on('mousemove.botR', botR);
    return;
  }
  if (x < centreX && y > centreY) {
    //bot left
    $('#area').off('mousemove.topR').off('mousemove.topL').off('mousemove.botR').on('mousemove.botL', botL);
    return;
  }
  resizing = false;
  return;
}

function topR(event) {
  if (!resizing || !isMouseDown)
    return;
  $('#area').on('mouseup', up);
  console.log("top right");
  size = previousSelectedSquare.size;
  var yb = previousSelectedSquare.y + size;
  if (parseInt(yb - (event.pageY - canvas.offsetTop)) < 60)
    return;
  previousSelectedSquare.size = parseInt(yb - (event.pageY - canvas.offsetTop));
  previousSelectedSquare.y = parseInt(event.pageY - canvas.offsetTop);
  drawSquares();
  return;
}

function topL(event) {
  if (!resizing || !isMouseDown)
    return;
  $('#area').on('mouseup', up);
  console.log("top left");
  x = previousSelectedSquare.x + previousSelectedSquare.size;
  y = previousSelectedSquare.y + previousSelectedSquare.size;
  if (parseInt(y - (event.pageY - canvas.offsetTop)) < 60)
    return;
  previousSelectedSquare.size = parseInt(y - (event.pageY - canvas.offsetTop));
  previousSelectedSquare.y = parseInt(event.pageY - canvas.offsetTop);
  previousSelectedSquare.x = parseInt(event.pageX - canvas.offsetLeft);
  drawSquares();
  return;
}

function botR(event) {
  if (!resizing || !isMouseDown)
    return;
  $('#area').on('mouseup', up);
  console.log("bot right");
  size = previousSelectedSquare.size;
  if ((event.pageX - canvas.offsetLeft - previousSelectedSquare.x + size) / 2 < 60)
    return;
  previousSelectedSquare.size = parseInt((event.pageX - canvas.offsetLeft - previousSelectedSquare.x + size) / 2);
  drawSquares();
  return;
}

function botL(event) {
  if (!resizing || !isMouseDown)
    return;
  $('#area').on('mouseup', up);
  console.log("bot left");
  var xr = previousSelectedSquare.x + previousSelectedSquare.size;
  if (xr - event.pageX - canvas.offsetLeft < 60)
    return;
  previousSelectedSquare.size = parseInt(previousSelectedSquare.x + previousSelectedSquare.size - (event.pageX - canvas.offsetLeft));
  previousSelectedSquare.x = parseInt(event.pageX - canvas.offsetLeft);
  drawSquares();
  return;
}

#area {
  margin-top: 0;
  border: 4px black solid;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<canvas id="area" width="1250" height="550"></canvas>