Question

我在画布上画了一个圆圈并在边框附近放了一个图像。现在我完全不知道..我想围绕圆圈拖动图像，但箭头图像的顶部应始终位于边框上。例如：我在九点钟的时候将箭头从顶部向左拖动。现在箭头图像需要旋转90度。

＆＃13;

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++)
{
	var radians = degree * Math.PI / 179;
	var x = 150 + radius * Math.cos(radians);
	var y = 150 + radius * Math.sin(radians);
	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++)
{
	var pt = points[i];
			
	context.lineTo(pt.x + 4, pt.y + 4);
}

context.strokeStyle = "black";
context.lineWidth = 1;
context.stroke();	
context.closePath();

＆＃13;

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

＆＃13;

Answer 1

你需要：

按照我们的预期绘制你的Arc（除非你有更好的计划lineTo()）
计算画布内的鼠标位置 - 鼠标移动。
根据鼠标位置与弧中心计算合成度。
缓存您的图片以供重复使用
创建绘图函数（一个用于Arc，另一个用于在翻译画布上下文后绘制Image）。通过这种方式（单击+拖动）鼠标移动，您可以简单地重复使用它们将对象绘制到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();	
    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，而不是问}

拖动在圆圈内移动图像（圆周运动）

1 个答案: