拖動在圓形內移動圖像（圓形移動）

Question

我在畫布上畫了一個圓，並在邊框附近放置了一個圖像。現在我絕對沒有想法..我想拖動圖片周圍的圖像，但箭頭圖像的頂部應該始終在邊框上。 例如：我從九點鐘的頂部向左拖動箭頭。現在箭頭圖像需要旋轉90度。

http://jsfiddle.net/L5twk3ak/1/

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>

Answer 1

您需要：

• 畫出你的弧作爲我們應該（除非你有更好的計劃與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，請問}