拖动在圆形内移动图像（圆形移动）

我在画布上画了一个圆，并在边框附近放置了一个图像。现在我绝对没有想法..我想拖动图片周围的图像，但箭头图像的顶部应该始终在边框上。例如：我从九点钟的顶部向左拖动箭头。现在箭头图像需要旋转90度。拖动在圆形内移动图像（圆形移动）

canvas = document.getElementById('test'); 
 
var context = canvas.getContext("2d"); 
 
var points = []; 
 
var radius = 55; 
 

 
imageBG = new Image(); 
 
imageBG.onload = function() {context.drawImage(imageBG, 148, 100, 15, 15);}; 
 
imageBG.src = 'https://www.nanamee.com/upload/images/5945/5945_p.jpg'; 
 

 
for(var degree = 0; degree < 360; degree++) 
 
{ 
 
\t var radians = degree * Math.PI/179; 
 
\t var x = 150 + radius * Math.cos(radians); 
 
\t var y = 150 + radius * Math.sin(radians); 
 
\t points.push({x : x, y : y}); 
 
} 
 

 
context.beginPath(); 
 
context.moveTo(points[0].x + 4, points[0].y + 4) 
 

 
for(var i = 1; i < points.length; i++) 
 
{ 
 
\t var pt = points[i]; 
 
\t \t \t 
 
\t context.lineTo(pt.x + 4, pt.y + 4); 
 
} 
 

 
context.strokeStyle = "black"; 
 
context.lineWidth = 1; 
 
context.stroke(); \t 
 
context.closePath();

<canvas id="test" width="400" height="400">Your browser does not support the HTML5 canvas tag.</canvas>

来源

2015-01-04 Hans Martin

我不明白的是：为什么你没有这样做：http://jsfiddle.net/L5twk3ak/2/（使用简单的** arc **）;你的代码在哪里听画布内的鼠标位置？你的拖曳活动在哪里？数学在哪里？ – 2015-01-04 14:55:20

您需要：

画出你的弧作为我们应该（除非你有更好的计划与lineTo()）
计算鼠标在画布内的位置 - 在mousemov上即
根据鼠标位置与弧中心计算合成程度。
缓存图像以供重用
创建绘图函数（一个用于Arc，另一个用于在翻译画布上下文后绘制图像）。通过这种方式（单击并拖动）mousemove，您可以简单地重复使用它们将对象绘制到Canvas中。

_{我不会告诉你如何实现点击+拖拽的原因，而是很琐碎：您只需如果两个CLICK + MOUSEMOVE注册申请的抽奖功能。}

这里是有趣的计算部分：

var canvas = document.getElementById('test'); // Store in variable! 
 
var context = canvas.getContext("2d"); 
 
var circle = {rad: 55, x:100, y:100};   // Object for ease of use 
 
var img = {src:'//placehold.it/13x13/000', x:0 ,y:0, w:13, h:13}; 
 
var arrowImg; // Store for later Image reference 
 

 
function drawArc(){ 
 
    context.beginPath(); 
 
    context.arc(circle.x, circle.y, circle.rad, 0, Math.PI*2, true); 
 
    context.strokeStyle = "#000"; 
 
    context.lineWidth = 1; 
 
    context.stroke(); \t 
 
    context.closePath(); 
 
} 
 
function drawImg(deg){ 
 
    context.save(); // save before we mess with ctx translations 
 
    context.translate(circle.y, circle.x); // temporarily translate the ctx 
 
              // to the Arc center coordinates. 
 
    context.rotate(deg*Math.PI/180); // we need Radians so deg*Math.PI/180 
 
    context.drawImage(arrowImg, circle.rad-img.w, -img.h/2); 
 
    context.restore(); // restore to default 
 
} 
 
function calcDeg(e){ // Retrieve degree from mouse position vs. arc center 
 
    var mPos = { 
 
     x : e.pageX-canvas.offsetLeft-circle.x, 
 
     y : e.pageY-canvas.offsetTop-circle.y 
 
    }; 
 
    var getAtan = Math.atan2(mPos.y, mPos.x);  
 
    return getAtan*180/Math.PI; 
 
} 
 

 
drawArc();         // Draw the ARc 
 
arrowImg = new Image();      // Create Image Obj 
 
arrowImg.onload = function(){ drawImg(-90) }; // onload draw the Image 
 
arrowImg.src = img.src; 
 

 
canvas.addEventListener("mousemove", function(evt){ 
 
    canvas.width = canvas.width; // clear the canvas 
 
    drawArc();     // Draw Arc 
 
    drawImg(calcDeg(evt));  // Draw Image at the calculated degree 
 
}, false);

canvas{background:#eee;}

<canvas id="test" width="400" height="400">Your browser does not support the HTML5 canvas tag.</canvas>

_{看不清？ Goog，请问}

来源

2015-01-04 16:57:03

拖动在圆形内移动图像（圆形移动）

回答

相关问题