范围

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/

我的目标是能够在按下鼠标的同时将前景图像（大白色箭头）转到它的中心，并在释放鼠标时进行修复。我想我实现了错误使用的代码。如果我改变变量＆＃34; r＆＃34; （角度）手动并运行代码，图像确实转动。

任何帮助都将不胜感激。

Answer 1

范围

您的第一个问题是由于范围不正确的变量/函数造成的。看到这些错误（它们将出现在您的控制台中）：

未捕获的ReferenceError：isDown未定义

未捕获的ReferenceError：drawPijl未定义

未捕获的ReferenceError：pijl未定义

适当范围这三个。

逻辑

I don't think ctx.isPointInPath means what you think it means.能够进行研究是一项宝贵的技能。请参阅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);

这是你的主要问题。

快乐的编码！

这是一个有效的example fiddle，并演示了一些可能需要修复的内容。

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

1 个答案:

范围

逻辑

编码练习