项目上的Canvas mousemove事件

Question

我在画布区域有3个弧形起点，所以当用户拖动任何一个圆弧时，我想画一个圆圈，直到他顺时针方向拖动并沿逆时针方向移动。

我的问题是我怎样才能得出他拖动的三个精确弧线，直到他拖动的位置和方向。

我从谷歌尝试如下，但没有运气，请参阅jsfiddle并建议。

http://jsfiddle.net/ineffablep/azh8ma89/38/

var arcStep = 0.02;
var numberOfarcs = 3;
for (i = 1; i <= numberOfarcs; i++) {
    var arcRadiusFactor = (1 + (1 / numberOfarcs) * i) - 0.1;
    var arcRadius = arcRadiusFactor * radius;
    context.beginPath();
    context.arc(centerX, centerY, arcRadius, 1.5 * Math.PI, 1.51 * Math.PI, false);
    context.lineWidth = 15;
    context.setLineDash([0]);

    context.strokeStyle = 'black';
    context.stroke();

}

//add events
canvas.addEventListener("mousedown", onMouseDown, false);
canvas.addEventListener("mouseup", onMouseUp, false);
canvas.addEventListener("mousemove", onMouseMove, false);

var mouseDown = false;
function onMouseDown(e) {
    mouseDown = true;
    e.stopPropagation();
}
function onMouseUp(e) {
    mouseDown = false;
    e.stopPropagation();
}
function onMouseMove(e) {
    e.stopPropagation();
    if (!mouseDown) return;
    var cursor = {
        x: e.offsetX || e.originalEvent.layerX,
        y: e.offsetY || e.originalEvent.layerY
    };

    console.log(cursor.x, cursor.y);

}

Answer 1

您可以使用trigonomic arcTangent计算鼠标与中心点角度。

这是示例代码和演示：

 var canvas=document.getElementById("canvas"); var ctx=canvas.getContext("2d"); var cw=canvas.width; var ch=canvas.height; function reOffset(){ var BB=canvas.getBoundingClientRect(); offsetX=BB.left; offsetY=BB.top; } var offsetX,offsetY; reOffset(); window.onscroll=function(e){ reOffset(); } var isDown=false; var startX,startY; var cx=cw/2; var cy=ch/2; var PI=Math.PI; var PI2=PI*2; var radius=50; var radius1=100; var drag1W=16; var drag1H=20; var drag1X=cx-drag1W/2; var drag1Y=cy-drag1H/2-radius1; var drag1IsDragging=false; var drag1Sweep=0; ctx.lineWidth=5; draw(); function draw(){ ctx.clearRect(0,0,cw,ch); ctx.beginPath(); ctx.arc(cx,cy,radius,0,PI2); ctx.closePath(); ctx.fillStyle='skyblue'; ctx.strokeStyle='lightgray'; ctx.fill(); ctx.stroke(); ctx.fillStyle='blue'; ctx.fillRect(drag1X,drag1Y,drag1W,drag1H); if(drag1Sweep>0){ ctx.beginPath(); ctx.arc(cx,cy,radius1,-PI/2,-PI/2+drag1Sweep); ctx.strokeStyle='blue'; ctx.stroke(); } } function handleMouseDown(e){ // tell the browser we're handling this event e.preventDefault(); e.stopPropagation(); mx=parseInt(e.clientX-offsetX); my=parseInt(e.clientY-offsetY); // Put your mousedown stuff here if(mx>=drag1X && mx<=drag1X+drag1W && my>=drag1Y && my<=drag1Y+drag1H){ isDown=true; drag1IsDragging=true; } } function handleMouseUp(e){ // tell the browser we're handling this event e.preventDefault(); e.stopPropagation(); // Put your mouseup stuff here isDown=false; drag1IsDragging=false; } function handleMouseMove(e){ if(!isDown){return;} // tell the browser we're handling this event e.preventDefault(); e.stopPropagation(); mx=parseInt(e.clientX-offsetX); my=parseInt(e.clientY-offsetY); // Put your mousemove stuff here var dx=mx-cx; var dy=my-cy; drag1Sweep=(Math.atan2(dy,dx)+PI/2+PI2)%PI2; draw(); } $("#canvas").mousedown(handleMouseDown); $("#canvas").mousemove(handleMouseMove); $("#canvas").mouseup(handleMouseUp); $("#canvas").mouseout(handleMouseUp); 

 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>Drag from blue rectangle around the circle</h4> <canvas id="canvas" width=300 height=300></canvas>