Question

我创建了一个可以在圆圈中移动的拖动：

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/

Answer 1

你需要在你的函数kolo中更改canvas.radius for pozycja_kamery.promien

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”）中的“#pozycja_kamery”。可拖动的 http://jsfiddle.net/DAyrH/2/

Answer 2

只要光标在圆圈内，看起来就很好......也许你需要一些鼠标跟踪 - 例如Possible to get the current mouse coords with Javascript?

Answer 3

您需要添加代码，以便在鼠标离开圆圈后继续更新点的位置。目前看来你只是在点击鼠标时更新位置并且在点上方，你应该在点上方的mousedown上设置一些变量并更新位置直到鼠标事件。

这样的事情：

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

    }
}

可以在圆圈中拖拽

3 个答案: