0

I've created a draggable that moves in a circle:

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));
}

But it's not a smooth movement. How to fix it? Here's my code: http://jsfiddle.net/draqo/DAyrH/

I've followed this: http://jsfiddle.net/7Asn6/

4

3 回答 3

1

你需要像这样在你的函数 kolo 中为 pozycja_kamery.promien 更改 canvas.radius 

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
       }
    } 
}

您可以删除包含： $("#wskaznik").draggable
http://jsfiddle.net/DAyrH/2/中的“#pozycja_kamery”

于 2013-11-07T19:33:54.117 回答
0

只要光标在圆圈内，看起来就很好...也许您需要一些鼠标跟踪 - 例如可以使用 Javascript 获取当前鼠标坐标？

于 2013-11-07T19:12:47.997 回答
0

您需要添加代码，该代码将在鼠标离开圆圈后继续更新点的位置。目前，您似乎仅在单击鼠标并在点上方时更新位置，您应该在点上方的 mousedown 上设置一些变量并更新位置，直到发生 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

    }
}
于 2013-11-07T19:13:25.383 回答