两个在圆圈内旋转的箭头
Two arrows rotating inside a circle
所以,我需要实现的基本想法是有一个从0到360度的简单圆。
圆圈内有两个箭头。我需要它们在圆圈内旋转。
一个箭头需要每度旋转一次,直到达到指定的角度。另一个需要直接转到那个角度。
因此,你的箭头都会从0度开始,如果你指定要达到100度,一个箭头会立即跳起来指向100度,而另一个箭头则会逐渐达到100度。
编辑:
很抱歉我对stackerflow缺乏技巧(我刚刚意识到我的问题中从未包含一个问题…)。所以我早些时候通过stackerflow上的另一个问题在画布上找到了简单的箭头,但当我开始研究实际旋转箭头时,我只是迷失在了代码中。
我想我的问题是:如何根据用户选择的度数值对两个箭头应用旋转?
以下是我制作箭的方法:
<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>
箭头很好,但让其中一个旋转,而另一个跳到所需的度数值是我发现很难的。我找不到任何关于如何让他们根据用户给出的学位值移动的例子或想法。
使用jQuery,您可以根据鼠标在元素上的位置获得度数并应用CSS3变换旋转度数并设置动画过渡时间:
const $el = $('#circle'),
$cir = $el.children();
$el.on('click', evt => {
const o = $(evt.target).offset(),
rad = $el.width() / 2,
mPos = {
x: evt.pageX - o.left,
y: evt.pageY - o.top
},
a = Math.atan2(mPos.x - rad, mPos.y - rad),
d = -a / (Math.PI / 180) + 180;
$cir.css({transform: `rotate(${d}deg)`});
});
#circle {
position: relative;
width: 150px;
height: 150px;
border-radius: 50%;
font-family: arial, helvetica, sans-serif;
user-select: none; /* prevent text highlight */
cursor: pointer;
}
#circle>* {
text-align: center;
position: absolute;
border-radius: inherit;
width: inherit;
height: inherit;
}
#circle1 {
background: #eee;
transition: 1.3s;
}
#circle2 {
background: #fff;
transition: 0.3s;
top: 20px;
left: 20px;
width: calc(150px - 40px);
height: calc(150px - 40px);
}
<div id="circle">
<div id="circle1">▼</div>
<div id="circle2">▲</div>
</div>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
相关文章:
- 用两个手指旋转谷歌地图javascript中的地图
- 选择最短的旋转来排列两个图像
- 使用关键帧图像旋转器时,图像不会在两个块之间同步协调
- 围绕其中心旋转两个画布
- 在图像后面旋转两个图像
- 为什么两个潜水器都不旋转
- 在两个轴上旋转THREE.js中的三维矢量
- 如何在画布中同时旋转两个矩形
- 如何在同一时间和同一鼠标事件上旋转两个不同的X3D场景
- 如何在两个方向上旋转图像90
- 如何在同一页面中使用两个不同版本的猫头鹰旋转木马
- 两个在圆圈内旋转的箭头
- 猫头鹰旋转木马,一次滚动两个项目
- jQuery文本旋转/填充适用于单个单词,但不适用于两个单词
- 在相反的方向上旋转两个图像
- 在一个页面上显示两个旋转木马
- 计算两个旋转矩形/多边形的碰撞和相交面积
- JQuery在悬停(3D)时前后旋转两个边
- 基本的li旋转器显示两个而不是一个
- 我如何旋转两个图像[在同一画布上]在相反的方向