Итак, основная идея, которую мне нужно достичь, состоит в том, чтобы иметь простой круг, который идет от 0 до 360 градусов.Две стрелки, вращающиеся внутри круга

Внутри этого круга находятся две стрелки. Мне нужно, чтобы они вращались внутри круга.

Одна стрелка должна вращать степень на градус, пока не достигнет указанного угла. Другой должен идти прямо к этому углу.

Таким образом, ваши стрелки начинаются с 0 градусов, и если вы указали, что хотите перейти на 100 градусов, одна стрела мгновенно прыгнет и начнет указывать на 100 градусов, в то время как другая постепенно превратится в 100 градусов.

EDIT:

К сожалению о моем неумении с StackOverflow (я просто понял, что я никогда не было включен вопросом в мой вопрос ...). Таким образом, мне удалось получить простые стрелки вниз в холсте раньше другого вопроса о stackoverflow, но когда я начал искать фактические вращение стрелок, я просто потерялся в коде.

Я думаю, мой вопрос был следующим: как я могу применить поворот к двум моим стрелкам на основе значения градуса, выбранного пользователем?

Так вот что мне удалось сделать мои стрелы:

<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

Это хорошая идея. Что насчет этого? –

Я думаю, вы должны отредактировать свой вопрос и сделать его более понятным, иначе вы получите голос некоторых «супер жестоких» пожилых людей здесь :) –

С JQuery вы можете получить градусов в зависимости от положения мыши -Более вашего элемента и применить 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; 
}

NEW Пример:

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 no please, просто создайте фоновое изображение для этого элемента - который имеет радиально смещенные 24 строки в 15 °. Это все, что вам нужно. –

Две стрелки, вращающиеся внутри круга

ответ

NEW Пример:

Смежные вопросы