在html5画布中用鼠标旋转图像

Question

我在使用html5用鼠标打开图像时遇到了一些麻烦。 我有一个背景图像和一个前景图像。 图像显示正确，但是我无法旋转前景图像。

var canvas = document.getElementById("canvas"),
  ctx = canvas.getContext("2d");

var canvasOffset = $("#canvas").offset();
var offsetCX = canvasOffset.left;
var offsetCY = canvasOffset.top;
var cx = canvas.width / 2;
var cy = canvas.height / 2;
var r = -2.3;

var background = new Image();
background.src = "http://i.imgur.com/dHDMocI.png";

background.onload = function drawBackground() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.drawImage(background, 0, 0);

  var pijl = new Image();
  pijl.src = "http://i.imgur.com/2N70aC1.png";

  pijl.onload = function drawPijl() {
    var xOffset = pijl.width / -2;
    var yOffset = pijl.height / -2;
    ctx.save();
    ctx.translate(242, 233);
    ctx.rotate(r);
    ctx.drawImage(pijl, xOffset, yOffset);
    ctx.restore();
  }
}

function handleMouseDown(e) {
  mouseX = parseInt(e.clientX - offsetCX);
  mouseY = parseInt(e.clientY - offsetCY);
  drawBackground(false);
  isDown = ctx.isPointInPath(mouseX, mouseY);
  console.log(isDown);
}

function handleMouseUp(e) {
  isDown = false;
}

function handleMouseOut(e) {
  isDown = false;
}

function handleMouseMove(e) {
  if (!isDown) {
    return;
  }

  mouseX = parseInt(e.clientX - offsetCX);
  mouseY = parseInt(e.clientY - offsetCY);
  var dx = mouseX - cx;
  var dy = mouseY - cy;
  var angle = Math.atan2(dy, dx);
  r = angle;
  drawBackground();
}

$("#canvas").mousedown(function(e) {
  handleMouseDown(e);
});
$("#canvas").mousemove(function(e) {
  handleMouseMove(e);
});
$("#canvas").mouseup(function(e) {
  handleMouseUp(e);
});
$("#canvas").mouseout(function(e) {
  handleMouseOut(e);
});

这是我的JSfiddle： https ://jsfiddle.net/rnhgqcw0/1/

我使用了部分代码，并对其进行了编辑以用于图片： http : //jsfiddle.net/2bgypydj/

我的目标是在按住鼠标的同时能够围绕前景图像的中心（白色大箭头）旋转，并在释放鼠标时将其固定。 我想我实现了我使用错误的代码。 如果我手动更改变量“ r”（角度）并运行代码，则图像会旋转。

任何帮助，将不胜感激。

Answer 1

范围

您的第一个问题是变量/函数作用域不正确的结果。 看到以下错误（它们将出现在控制台中）：

未捕获的ReferenceError： isDown未定义

未捕获的ReferenceError： drawPijl

未捕获的ReferenceError：未定义pijl

正确调整这三个范围。

逻辑

我认为ctx.isPointInPath意味着您认为的含义。 能够研究是一项宝贵的技能。 参见MDN 。

编码实践

$("#canvas").mousedown(function(e) {
    handleMouseDown(e);
});
$("#canvas").mousemove(function(e) {
    handleMouseMove(e);
});
$("#canvas").mouseup(function(e) {
    handleMouseUp(e);
});
$("#canvas").mouseout(function(e) {
    handleMouseOut(e);
});

可以很容易地浓缩为：

$("#canvas").mousedown(handleMouseDown);
$("#canvas").mousemove(handleMouseMove);
$("#canvas").mouseup(handleMouseUp);
$("#canvas").mouseout(handleMouseOut);

---

这些是您的主要问题。

编码愉快！

---

这是一个有效的示例小提琴 ，并演示了可能需要修复的另一件事。