HTML5画布，使图像旋转点击选择和拖动圆 [英] HTML5 canvas, make image rotate around click to select and drag circle

问题描述

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

这里是一个小提琴，显示当前代码的作用。

在handlemousemove方法，它调用state.draw（）每次鼠标移动我通过mouseX，鼠标Y到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（）; 
  

我做错了什么？

解决方案

关闭...看看这个例子：

  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 loadervar imageURLs = []; var imagesOK = 0; var imgs = []; imageURLs.push ：//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  = 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 = mouse Y-cy; var radianAngle = Math.atan2（dy，dx）; //绘制代码到这里var img = targets [selectedTarget] .image; ctx.clearRect（100，0，canvas.width，canvas.height）; //绘制圆ctx.beginPath（）; ctx.arc（cx，cy，radius，0，Math.PI * 2）; ctx.closePath（）; ctx.stroke（）; //绘制围绕圆周旋转的图像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>在左侧选择一个图标，方法是点击< br> ;然后移动鼠标，让图标围绕圆旋转< / h4>< canvas id =canvaswidth = 350 height = 350>< / canvas>  

>

I have completed code that has a user click a button (to the right of the canvas), then the image is added to the canvas and is constrained to only move around the circumference of a circle. In order to move the image the user just needs to click the image and then move the mouse. To release the image the user simply needs to click where the image goes on the canvas.

Here is a fiddle showing what the current code does. http://jsfiddle.net/smacnabb/68awv7sq/9/

Question: I am looking to be able to have the images that move around the circumference of the circle rotate while moving around the circumference of the circle.
This is what I mean:

Here is a fiddle for the code I added to try and make this happen http://jsfiddle.net/smacnabb/68awv7sq/11/

in the handlemousemove method, it calls state.draw() every time the mouse move i'm passing mouseX, mouseY to state.draw.

state.draw() is in addstate method and this was the code I added to make the image rotate

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();

What am I doing wrong?

解决方案

You are close...Take a look at this example:

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>

这篇关于HTML5画布，使图像旋转点击选择和拖动圆的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！