所以，我需要实现的基本思路是有一个从0到360度的简单圆。在圆内旋转的两个箭头

在那个圆圈内有两个箭头。我需要他们在圈内旋转。

一个箭头需要每度旋转度数，直到达到指定的角度。另一个需要直接去那个角度。

所以你的箭头都会从0度开始，如果你指定你想要去100度，一个箭头会立即跳跃并指向100度，而另一个箭头将逐渐变为100度。

编辑：

对不起我的缺乏与计算器技能的（我才意识到我从未纳入一个问题到我的问题...）。所以我设法通过另一个关于stackoverflow的问题在canvas中得到简单的箭头，但是当我开始考虑旋转箭头时，我只是迷失在代码中。

我想我的问题是这样的：如何根据用户选择的度数值将旋转应用于我的两个箭头？

所以这里就是我设法让我的箭有：

<html> 
<head> 
</head> 
<body> 
<canvas id="c" width="500" height="500"></canvas> 

<script langauage="javascript"> 
<!-- 
ctx = document.getElementById("c").getContext("2d"); 
ctx.beginPath(); 
canvas_arrow(ctx,50,50,100,50); 
canvas_arrow(ctx,50,50,10,30); 
ctx.stroke(); 


function canvas_arrow(context, fromx, fromy, tox, toy){ 
    var headlen = 10; // length of head in pixels 
    var dx = tox-fromx; 
    var dy = toy-fromy; 
    var angle = Math.atan2(dy,dx); 
    context.moveTo(fromx, fromy); 
    context.lineTo(tox, toy); 
    context.lineTo(tox-headlen*Math.cos(angle-Math.PI/6),toy-headlen*Math.sin(angle-Math.PI/6)); 
    context.moveTo(tox, toy); 
    context.lineTo(tox-headlen*Math.cos(angle+Math.PI/6),toy-headlen*Math.sin(angle+Math.PI/6)); 
} 
--> 
</script> 
</body> 
</head>

的箭头都很好，但让他们中的一个旋转而另一个跳转到所需的程度值是什么，我觉得很难。我找不到任何关于如何根据用户给定的度数值移动它们的示例或想法。

来源

2013-07-08 Julien Desaulniers

这很有趣，但什么是你的问题？ – STLDeveloper

这是个好主意。那它呢？ – 2013-07-08 03:14:25

我认为你应该编辑你的问题，使其更清晰，否则你会得到一些“超级残忍”的老年人在这里投票:) –

随着jQuery的你可以得到度取决于-over你的元素鼠标的位置，并应用CSS3变换旋转度，并设置动画转换时间：

LIVE DEMO

jQuery：

var $el = $('#panel'), 
    rad = $el.width()/2 , 
    elP = $el.offset(), 
    elPos = { x: elP.left, y: elP.top }; 

$el.on('click',function(e){ 

    var mPos = { 
     x: e.pageX-elPos.x, 
     y: e.pageY-elPos.y 
    }; 
    var getAtan = Math.atan2(mPos.x-rad, mPos.y-rad); 
    var deg = -getAtan/(Math.PI/180) + 180; 

    $('#circle1, #circle2').css({transform:'rotate('+deg+'deg)'}); 

});

HTML：

<div id="panel"> 

    <div id="circle1">V</div> 
    <div id="circle2">v</div> 

</div>

CSS：

#panel{ 
    cursor:pointer; 
    position:relative; 
    width:300px; 
    height:300px; 
    border-radius:250px; 
} 

#circle1{ 
    border:1px solid #444; 
    text-align:center; 
    position:absolute; 
    width:300px; 
    height:300px; 
    border-radius:250px; 
    background:#eee; 
      transition: 1.3s; 
    -webkit-transition: 1.3s; 
} 
#circle2{ 
    text-align:center; 
    border:1px solid #444; 
    position:absolute; 
    margin:20px; 
    width:260px; 
    height:260px; 
    border-radius:250px; 
    background:#fff; 
      transition: 0s; 
    -webkit-transition: 0s; 
}

新的例子：

LIVE DEMO WITH MOUSEMOVE AND CLICK

您可以将您的逻辑函数中和一些事件把它传递到该函数的参数：

var $el = $('#panel'), 
    rad = $el.width()/2 , 
    elP = $el.offset(), 
    elPos = { x:elP.left, y:elP.top }; 

function deg(e){ 
    var mPos = {x: e.pageX-elPos.x,y: e.pageY-elPos.y}; 
    var getAtan = Math.atan2(mPos.x-rad, mPos.y-rad); 
    return -getAtan/(Math.PI/180) + 180; 
} 

$el.click(function(e){ 
    $('#circle2').css({transform:'rotate('+ deg(e) +'deg)'}); 
}).mousemove(function(e){ 
    $('#circle1').css({transform:'rotate('+ deg(e) +'deg)'}); 
});

来源

2013-07-08 03:33:01

[看这里。]（http://meta.stackexchange.com/questions/181774/stricter-kbd-usage-rules） – Undo

这工作就像一个魅力，我玩弄它尝试和修改标记使他们成为箭头。我正在想出一个问题，就是在灰度圆上加上标记，并加上度数。我想每15度添加一个标记，但似乎无法找出如何。我在想混合html，css和sass可能是最好的？类似于这个[link]（http://css-tricks.com/set-text-on-a-circle/） –

@JulienDesaulniers不，请为这个元素创建一个背景图片 - 在放射线上放置24行15°。这就是你需要的。 –

在圆内旋转的两个箭头

回答

新的例子：

相关问题