Draggable в кругу

Question

Draggable в кругу

0

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

var wskaznik = document.getElementById("wskaznik");
var pozycja_kamery_pole = document.getElementById("pozycja_kamery");
var pozycja_kamery = {
szerokosc: pozycja_kamery_pole.offsetWidth,
wysokosc: pozycja_kamery_pole.offsetHeight,
gora: pozycja_kamery_pole.offsetTop,
lewo: pozycja_kamery_pole.offsetLeft
};
pozycja_kamery.srodek = [pozycja_kamery.lewo + pozycja_kamery.szerokosc / 2,     pozycja_kamery.gora + pozycja_kamery.wysokosc / 2];
pozycja_kamery.promien = (pozycja_kamery.szerokosc / 2) -10;

function kolo(x, y) {
var odst = odstep([x, y], [65,65]);
if (odst <= pozycja_kamery.promien) {
    return {x: x, y: y};
} 
else {
    x = x - 65;
    y = y - 65;
    var radians = Math.atan2(y, x)
       return {
           x: Math.cos(radians) * canvas.radius + 65,
           y: Math.sin(radians) * canvas.radius + 65
       }
    } 
}
function odstep(pkt1, pkt2) {
var x1 = pkt1[0],
    y1 = pkt1[1],
    x2 = pkt2[0],
    y2 = pkt2[1];
return Math.sqrt(Math.pow(x1 - x2, 2) + Math.pow(y1 - y2, 2));
}

Но это не плавное движение. Как это исправить? Здесь мой код: http://jsfiddle.net/draqo/DAyrH/

Я следил за этим: http://jsfiddle.net/7Asn6/

Daniel Koczuła 07 нояб. 2013, в 20:20

Источник

0

холст не определен, замените его на pozycja_kamery.promien http://jsfiddle.net/DAyrH/1/
Abraham Uribe 07 нояб. 2013, в 19:21
0

Отлично! Спасибо!
Daniel Koczuła 07 нояб. 2013, в 19:36
0

посмотрите мой ответ, вам также нужно удалить защитную оболочку, иначе движение остановится на некоторых границах родительского div
Abraham Uribe 07 нояб. 2013, в 19:42

Показать ещё 1 комментарий

Теги:

jquery

draggable

3 ответа

0

Вам нужно добавить код, который будет продолжать обновлять положение точки после того, как мышь покинет круг. В настоящее время кажется, что вы только обновляете позицию, когда мышь нажата и над точкой, вы должны установить некоторую переменную на кусачке над точкой и обновить позицию до события mouseup.

Что-то вроде этого:

var isClicked = false;

window.onmouseup = function() {isClicked=false;}
getElementById("wskaznik").onmousedown=function() {isClicked = true;}

function updateCircle() {
    if (isClicked) {
        // update the position
        // if the mouse is within the boundary circle set to those coordinates.
        // if not set it to the nearest point on the boundary circle

    }
}

Farmer Joe 07 нояб. 2013, в 17:52

0

Выглядит хорошо, пока курсор находится внутри круга... может быть, вам нужно некоторое отслеживание мыши - например, возможно ли получить текущие мышиные координаты с Javascript?

Aneuway 07 нояб. 2013, в 16:57

Ещё вопросы

холст не определен, замените его на pozycja_kamery.promien http://jsfiddle.net/DAyrH/1/
посмотрите мой ответ, вам также нужно удалить защитную оболочку, иначе движение остановится на некоторых границах родительского div

Abraham Uribe · Accepted Answer · 2013-11-07T17-12-00.000Z

вам нужно изменить canvas.radius для pozycja_kamery.promien в вашей функции kolo, как это

function kolo(x, y) {
var odst = odstep([x, y], [65,65]);
if (odst <= pozycja_kamery.promien) {
    return {x: x, y: y};
} 
else {
    x = x - 65;
    y = y - 65;
    var radians = Math.atan2(y, x)
       return {//pozycja_kamery.promien is ($("#pozycja_kamery").width()/2)-10
           x: Math.cos(radians) * pozycja_kamery.promien + 65,
           y: Math.sin(radians) * pozycja_kamery.promien + 65
       }
    } 
}

вы можете удалить сдерживание: "#pozycja_kamery" в $ ("# wskaznik"). draggable
http://jsfiddle.net/DAyrH/2/