HTML5画布，使图像旋转单击以选择并拖动圆圈

Question

我已经完成了让用户单击一个按钮（位于画布右侧）的代码，然后将图像添加到画布并被限制为只能绕圆周移动。为了移动图像，用户只需单击图像然后移动鼠标。要释放图像，用户只需单击图像在画布上的位置即可。

这是一个显示当前代码功能的小提琴。 http://jsfiddle.net/smacnabb/68awv7sq/9/

问题：我希望能够让围绕圆周移动的图像在围绕圆周移动的同时旋转。
这就是我的意思：

这是我添加的代码以尝试实现这一点 http://jsfiddle.net/smacnabb/68awv7sq/11/

在handlemousemove 方法中，每次鼠标移动我将mouseX、mouseY 传递给state.draw 时，它都会调用state.draw()。

state.draw() 在 addstate 方法中，这是我为使图像旋转而添加的代码

var dx = mouseX - centerX;
var dy = mouseY - centerY;
var radianAngle = Math.atan2(dy, dx);
context.save();
context.translate(centerX, centerY);
context.rotate(radianAngle);
if (this.dragging) {
        context.strokeStyle = 'black';
        context.strokeRect(this.x, this.y, this.width + 2, this.height + 2)
}  
context.drawImage(this.image, this.x, this.y);
context.restore();

我做错了什么？

Answer 1

你很接近...看​​看这个例子：

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var $canvas = $("#canvas");
var canvasOffset = $canvas.offset();
var offsetX = canvasOffset.left;
var offsetY = canvasOffset.top;

var radianAngle = 0;
var cx = 225;
var cy = 125;
var radius = 50;

// image loader
var imageURLs = [];
var imagesOK = 0;
var imgs = [];
imageURLs.push("https://dl.dropboxusercontent.com/u/139992952/multple/cars.png");
imageURLs.push("https://dl.dropboxusercontent.com/u/139992952/multple/plane.png");
imageURLs.push("https://dl.dropboxusercontent.com/u/139992952/multple/cars1.png");
imageURLs.push("https://dl.dropboxusercontent.com/u/139992952/multple/plane1.png");
loadAllImages(start);

function loadAllImages(callback) {
  for (var i = 0; i < imageURLs.length; i++) {
    var img = new Image();
    imgs.push(img);
    img.onload = function() {
      imagesOK++;
      if (imagesOK >= imageURLs.length) {
        callback();
      }
    };
    img.onerror = function() {
      alert("image load failed");
    }
    img.crossOrigin = "anonymous";
    img.src = imageURLs[i];
  }
}

var imagesY = 20;
var targets = [];
var selectedTarget = -1;

function start() {
  var n = imgs.length / 2;
  for (var i = 0; i < n; i++) {
    var target = imgs[i + n];
    ctx.drawImage(target, 15, imagesY);
    targets.push({
      x: 15,
      y: imagesY,
      width: target.width,
      height: target.height,
      image: imgs[i]
    });
    imagesY += target.height + 10;
  }
}


function handleMouseDown(e) {
  e.preventDefault();
  x = parseInt(e.clientX - offsetX);
  y = parseInt(e.clientY - offsetY);
  for (var i = 0; i < targets.length; i++) {
    var t = targets[i];
    if (x >= t.x && x <= t.x + t.width && y >= t.y && y <= t.y + t.height) {
      selectedTarget = i;
      draw(x, y);
    }
  }
}

function handleMouseMove(e) {
  if (selectedTarget < 0) {
    return;
  }
  e.preventDefault();
  mouseX = parseInt(e.clientX - offsetX);
  mouseY = parseInt(e.clientY - offsetY);
  draw(mouseX, mouseY);
}


function draw(mouseX, mouseY) {
  var dx = mouseX - cx;
  var dy = mouseY - cy;
  var radianAngle = Math.atan2(dy, dx);
  // Drawing code goes here
  var img = targets[selectedTarget].image;
  ctx.clearRect(100, 0, canvas.width, canvas.height);
  // draw the circle
  ctx.beginPath();
  ctx.arc(cx, cy, radius, 0, Math.PI * 2);
  ctx.closePath();
  ctx.stroke();
  // draw the image rotated around the circumference
  ctx.save();
  ctx.translate(cx, cy);
  ctx.rotate(radianAngle);
  ctx.drawImage(img, radius - img.width / 2, -img.height / 2);
  ctx.restore();
}

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

body{ background-color: ivory; }
canvas{border:1px solid red;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<h4>Select an icon on left by clicking<br>
  Then move mouse to have icon rotate around circle</h4>
<canvas id="canvas" width=350 height=350></canvas>